显示图像后iframe逐渐消失

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;自动游戏将发生。

希望这对您有帮助。