I am using this code so that when the user clicks on the cover image, the image is hidden and the youtube video starts to play. This works fine in Chrome. However, in Safari when the user clicks on the image, all that appears is a white space and the video doesn't play.

I believe this is a problem with Jquery? Many thanks.

 

  
function youtubez_shortcode(){ $youlink = get_field('fl_tube'); if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $youlink, $match)) { $video_id = "https://www.youtube-nocookie.com/embed/" . $match[1] . "?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=light&showinfo=0&origin=https://www.example.com"; global $post;if (has_post_thumbnail($post->ID)){$youimg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', false );} return '<div id="vidocr" class="kalim" onclick="thevid=document.getElementById(\'thevideo\');thevid.style.display=\'block\';document.getElementById(\'iframezz\').src=document.getElementById(\'iframezz\').src.replace(\'autoplay=0\',\'autoplay=1\');"> <span class="vidovr"><span class="vidcap">Play Video</span></span><img class="vidovi" title="" src="' . $youimg[0] . '" /></div> <div id="thevideo" style="display:none;"><iframe id="iframezz" width="1280" height="720" src="' . $video_id .'" frameborder="0" allow="autoplay; fullscreen"></iframe></div><script>jQuery(\'#vidocr\').click(function(){ jQuery(\'#vidocr\').fadeOut(0, function(){jQuery(\'#thevideo\').fadeIn(\'1000\').find(\'iframe#iframezz\').attr(\'src\', jQuery(\'iframe#iframezz\').attr(\'src\').replace(\'autoplay=0\', \'autoplay=1\'));});});</script>';wp_reset_postdata(); } } add_shortcode('youtube', 'youtubez_shortcode');