Jak zamienić po kliknięciu miniaturke w filmik

Question

Witam.

Czy da się, a jak tak to jak mam zrobić tak żeby była miniaturka filmiku ale gdy nacisnę na miniaturkę ona zamieni się na filmik np. z youtube ?

Pozdrawiam

Answer 1

Witam. Najprościej za pomoca :target

<div class="container">
<a href="#yt"></a>
<iframe id="yt" class="yt" src="https://www.youtube.com/embed/G3tRM69Tp3k" frameborder="0" allowfullscreen></iframe>
</div>

body{
  background-color: grey;
}
.container{
  position: relative;
}
a{
  display:block;
  width: 200px; 
  height: 150px;
  border: 1px solid white;
  background-image: url("https://www.youtube.com/yt/brand/media/image/YouTube-logo-dark.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.yt{
  margin-left: -100%;
  width: 560px; 
  height: 315px;
  transition: margin 1s;
  position: absolute;
  top: 0;
  left:0;
}
:target{
  margin-left: 0;
}

 

Answer 2

Najprościej według mnie robisz sobie div i nadajesz mu parametry w CSS po czym umieszczasz w nim frame z filmikiem z YouTube. Na razie taki pomysł mi wpadł, pozdrawiam.