Blog durchsuchen

iframes responsiv einbinden

my solution:
1. embed the youtube vidoes with the code, youtube offers, for example:


<iframe width=“560″ height=“315″ src=“https://www.youtube.com/embed/lmFXThtn014?rel=0″ seamless=“seamless“ allowfullscreen></iframe>
2. define css-classes:
.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%;
}
3. put a div around the iframe
<div class=“video-container“><iframe…..></iframe></div>

Thanks to
http://www.geiststreicher.org/2013/11/tipps-tricks-youtube-videos-in-responsive-sites-einbetten/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert