Többeszközös YouTube és Vimeo videó

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.