时间戳

首页 > 解决方案 > 点击 IMG 时如何启用 YouTube？

jquery - 点击 IMG 时如何启用 YouTube？

问题描述

我正在开发一个网站，我的客户希望在单击图像时能够播放 youtube 视频，并且当视频结束时，视频消失并且再次出现相同的图像。

.boxyt {
  position: relative;
}

.boxyt .imgyt {
  position: absolute;
  left: 0;
  top: 0
}

.imgyt:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.59;
  background-color: #f1d2cd;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
<div class="m-auto boxyt">
  <div class="imgyt"><img src=".../images/youtube.png"></div>
  <?php the_field('youtube'); ?>
</div>

标签： jquerycsseventsyoutube

解决方案

你可以这样做：

HTML

<div class="ytvideo" data-video="7ixLP6mUqnw" style="width:560px; height:315px; background-image:url(https://img.youtube.com/vi/7ixLP6mUqnw/hqdefault.jpg)">

在此处对视频进行有意义的描述

jQuery

 // VIDEO 2
$('.ytvideo[data-video]').one('click', function() {

var $this = $(this);
var width = $this.attr("width");
var height = $this.attr("height");

$this.html('<iframe src="https://www.youtube.com/embed/' + $this.data("video") + '?autoplay=1"></iframe>');
});

CSS

    .imgvideo {
  cursor: pointer;
}

.playbutton {
  background: url(https://cdn0.iconfinder.com/data/icons/vector-basic-tab-bar-icons/48/play_button-128.png) center center no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  z-index: 10;
  opacity: .6;
}

.ytvideo {
  position: relative;
  margin: 0;
  padding: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  /* pour anciens Chrome et Safari */
  background-size: cover;
  /* version standardisée */
  cursor: pointer;
}

.ytvideo iframe {
  border-style: none;
  height: 100%;
  width: 100%;
}

.ytvideo .seo {
  display: none;
}

我用谷歌搜索“youtube 上点击图片播放”然后发现这个：http: //jsfiddle.net/onigetoc/81tztuk1/

推荐阅读