Skocz do zawartości

Odpalanie filmiku po kliknięciu w IMG ?


ar4
 Udostępnij

Rekomendowane odpowiedzi

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>

 

Odnośnik do komentarza
Udostępnij na innych stronach

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%;
}

 

Edytowane przez ar4
Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności