Question

我正在使用此代码，用户点击图片，然后加载并自动播放YouTube视频。除了用户点击图像后视频立即出现在图像底部的事实之外，一切都有效。

我需要弄清楚一些代码，以便图像完全淡出，然后显示视频。我在delay的代码中尝试的内容并不起作用。有什么想法吗？

<div id="vidocr" onclick="thevid=document.getElementById(\'thevideo\');thevid.style.display=\'block\';document.getElementById(\'iframe\').src=document.getElementById(\'iframe\').src.replace(\'autoplay=0\',\'autoplay=1\');">
  <img class="vidovi" title="" src="https://www.wpfreeware.com/wp-content/uploads/2014/09/placeholder-images.jpg" />
</div>
<div id="thevideo" style="display:none;">
  <iframe id="iframe" width="1280" height="720" src="https://www.youtube.com/watch?v=ppEqly6GFsA?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

<script>
  jQuery(\'#vidocr\').click(function(){
    jQuery(\'#vidocr\').fadeOut(500);
    jQuery(\'#thevideo\').delay(500).fadeIn(500);
  });
</script>

Answer 1

您可以使用解决方案https://jsfiddle.net/rdmwtcbx/1/

$('#vidocr').click(function(){
  $('#vidocr').fadeOut(500, function(){
    $('#thevideo')
      .fadeIn('slow')
      .find('iframe#iframe')
      .attr('src', $('iframe#iframe').attr('src').replace('autoplay=0', 'autoplay=1'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidocr">
  <img class="vidovi" title="" src="https://www.wpfreeware.com/wp-content/uploads/2014/09/placeholder-images.jpg" />
</div>
<div id="thevideo" style="display:none;">
  <iframe id="iframe" width="1280" height="720" src="https://www.youtube.com/embed/ppEqly6GFsA?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

jQuery fadeOut具有回调功能，一旦fadeOut完成，fadeIn将启动视频＆amp;自动播放会发生。

希望这会对你有所帮助。

在图像淡出后显示Iframe

1 个答案: