jQuery Forum

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');

1.   jQuery(document).ready(function() {
2.      
3.   jQuery(".fmap").colorbox({
4.     html:'<div id="map_canvas_all" style="width:730px; height:550px;"></div>',
5.     scrolling:false,
6.     width:"750px",
7.     height:"570px",
8.     onComplete:function(){ loadScriptGeneral(); }
9.   });
10. function loadScriptGeneral() {
11.   var script = document.createElement("script");
12.   script.type = "text/javascript";
13.   script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initializeGeneral";
14.   document.body.appendChild(script);
15. };
16. function initializeGeneral() {
17.   var imageG = new google.maps.MarkerImage('http://www.betaaa.com/images/pin.png',
18.       new google.maps.Size(20, 26),
19.       new google.maps.Point(0, 0),
20.       new google.maps.Point(0, 26)
21.   );
22.   var myLatlngG = new google.maps.LatLng(35.518421,24.018758);
23.   var myOptionsG = {
24.       zoom: 16,
25.       center: myLatlngG,
26.       mapTypeId: google.maps.MapTypeId.ROADMAP
27.   }
28.   var mapG = new google.maps.Map(document.getElementById("map_canvas_all"), myOptionsG);
29.  
30.   var markerG = new google.maps.Marker({
31.       position: myLatlngG,
32.       map: mapG,
33.       title: "aaa",
34.       icon: imageG
35.   });
36. };
37. });