Jeśli kiedyś miałeś problem ze skalowaniem filmów youtube na twojej stronie tak, by pasowały do każdego rodzaju i rozmiaru urządzenia – od dziś już go nie masz.

<style>
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
</style>

Wszystko sprowadza się do tego krótkiego kodu css. Wystarczy, że wkleisz go na swoją stronę, a każde video z youtube wkleisz w środek kodu:

<div class=”video-responsive”>

TUTAJ KOD VIDEO Z YOUTUBE

</div>

czyli na przykład:

<div class=”video-responsive”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/MG0StjFnIqk” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe></div>

i zbyt duże video na urządzeniach mobilnych już nigdy nie wrócą 😉