单击图像即可开始/播放嵌入式（iframe）youtube-video [英] start/play embedded (iframe) youtube-video on click of an image

问题描述

我正在尝试通过点击图片开始播放嵌入式YouTube视频。我们的想法是在视频上方放置一个图像，当点击图像时，它会淡出并开始播放视频。

I'm trying to start playing an embedded youtube video by clicking an image. The idea is to have an image on top of a video, and when the image is clicked it fades out and starts playing the video.

我正在使用jquery来淡化图像，并希望找到一种方法来播放或使用jquery点击视频。

I'm using jquery to fade the image, and was hoping to find a way to play or click the video using jquery as well.

褪色工作正常，但我无法弄清楚如何触发视频播放。
我通过将视频设置为自动播放并隐藏它，然后在单击图像时淡入视频，让它在几个浏览器上工作。在大多数浏览器中，视频在淡入时会自动播放，但在Chrome中，即使隐藏了它，它也会开始自动播放。它在iOS中也不能很好地工作。

The fading is working fine, but I can't figure out how to trigger the video to play. I got it to work on a couple of browsers by setting the video to autoplay and hide it, and then fade in the video when the image was clicked. On most browsers the video would autoplay when faded in, but in chrome it started to autoplay even when it was hidden. It didn't work well in iOS either.

由于我很擅长这个，我甚至不确定我是否写得100％正确，但我尝试过这样的事情没有成功：

Since I'm pretty new at this, I'm not even sure if I'm writing it 100% correct, but I've tried something like this without success:

     $('#IMAGE').click(function() { $('#VIDEO').play(); });

那么，我如何在点击图像上播放视频？
有没有办法在点击图像时播放视频，只需使用jquery？

So, how would I go about to make the video play on an image click? Is there a way to play the video when the image is clicked, just using jquery?

提前谢谢。

推荐答案

快速而肮脏的方法是简单地将 iframe 替换为 autoplay = 1 使用jQuery设置。

The quick and dirty way is to simply swap out the iframe with one that has autoplay=1 set using jQuery.

占位符：

<div id="videoContainer">
  <iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>

---

自动播放链接：

---

Autoplay link:

<a class="introVid" href="#video">Watch the video</a></p>

调用函数的 onClick 捕手

jQuery('a.introVid').click(function(){
  autoPlayVideo('VIDEO_ID_HERE','450','283');
});

---

函数

---

The function

/*--------------------------------
  Swap video with autoplay video
---------------------------------*/

function autoPlayVideo(vcode, width, height){
  "use strict";
  $("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}

这篇关于单击图像即可开始/播放嵌入式（iframe）youtube-video的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！