Odpalanie filmiku po kliknięciu w IMG ?

[ar4]

Witam,

chce zrobić coś takiego: odtworzenia filmu na youtube po kliknięciu w obrazek, a gdy wideo się kończy, wideo znika, a ten sam obraz pojawia się ponownie.

Szukałem w sieci wiele rozwiązań ale nic nie działa.

Ktoś coś może pomóc?

Mój kod to:

.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>

 

[kayman]

raczej js

https://stackoverflow.com/questions/7406063/how-to-play-start-youtube-video-after-clicking-on-an-image

[ar4]

Rozwiązałem inaczej. Gdyby ktoś potrzebował, to podaję rozwiązanie:

HTML

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

jQuery

$('.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

.ytvideo {
  position: relative;
  margin: 0;
  padding: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  cursor: pointer;
}

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