youtube

Responsive Youtube video

Heb je een responsive website, maar past de Youtube video op een pagina zich niet aan aan de grootte van het scherm? Volg de onderstaande aanwijzingen en je video ziet er ook op mobiel en tablet goed uit.

Video embedden

Om een video in te sluiten op een pagina, heb je een iframe code nodig. Ga hiervoor naar Youtube en vervolgens naar de gewenste video. Klik op Delen en daarna op Insluiten. Je kunt dan de code kopiƫren en plakken in het gedeelte van het CMS waar je de tekst kunt bewerken.

Youtube video op site

Op naar een responsive Youtube video

1. Voeg de onderstaande code toe aan je stylesheet

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

2. Om de video responsive te maken, plaats je onderstaande HTML om de iframe code.

HTML

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/7qQojfZoR2w" frameborder="0" width="560" height="315"></iframe>
</div>

Hulp nodig?

Heb je vragen of is er hulp gewenst bij het aanpassen van de code? Neem contact op!

Geschreven door Miranda Gahrmann

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Current month ye@r day *