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