A YouTube, a Vimeo és más videókiszolgálók megkönnyítik a lejátszók beágyazását a webhelyen. Ennek ellenére ezek a kiszolgálók alapértelmezésként nem szolgáltatnak lehetőséget a többeszközös (responsive) videók megjelenítésére. Ebben a rövid leírásban bemutatjuk ennek megvalósítását néhány CSS stílus elkészítésével.
1. Szerezzük be a YouTube videó beágyazó kódját
- Menjünk a Youtube oldalára és keressük meg a videó oldalát.
- Kattintsunk a Share >> Embed >> lehetőségre a jobb egérgombbal és másoljuk a vágólapra a HTML kódot.
Többeszközös videók
2. Használjuk a beágyazó kódot
A tartalomba szúrjuk be a beágyazó kódot. Ehhez hasonlót kapunk:
<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
3. Módosítsuk a beágyazó kódot
Tegyünk egy div címkét a beágyazó kód köré. Használjuk a video-responsive CSS osztályt és a kód most így néz ki:
<div class="video-responsive"> <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe> </div>
Adjuk hozzá a CSS kódot
A CSS stíluslapban helyezzük el a következő CSS bejegyzéseket:
.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;
}
A videók most már készek a többeszközös használatra. Méretezzük át a böngészőablakot a működés tesztelésére. Hasonló műveleteket kell elvégezni a Vimeo és más olyan szolgáltatók videói esetén, amelyek iframe címkét használnak.
