Responzivní Slideshare a Youtube videa

Je doba responzivních webu, je super že je můžeme mačkat a pořád vypadají dobře. Aby vypadali tyto weby dobře i když budou obsahovat youtube video tak musíte mít i responzivní video. Proto přikládám jednoduchý návod jak to udělat.

Co je potřeba ?

  1. Mít přístup k css stylům
  2. Každého video vložit do responzivního  kontejneru

Následující kód je nutné vložit do  CSS stylu.
Ve WordPressu je to Wordpres –> Administrace –> Vzhled –> Editor –> Kaskádové styly (CSS) (style.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%;
}

Pak je nutné následovně obalit embeded kód získaný od Slideshare nebo Youtube do div kontejneru s třídou video-container
<div class="video-container">
<iframe src="https://www.youtube.com/embed/dFVxGRekRSg"
frameborder="0" width="560" height="315" ></iframe >
</div>

Podobně lze obalit i slajdy z Slideshare
<div class="video-container">
<iframe src="http://www.slideshare.net/slideshow/embed_code/33055977"
frameborder="0" width="560" height="315" ></iframe >
</div>

Před úpravou:

Po vložení do kontejneru:

Ukázka responzivního videa (Internet Marketing 2013: Petra Větrovská – 9 tipů jak získáte zákazníka levněji (Adwords)):

 

Pro porovnání neresponzivní Petra Větrovská: AdWords

Další info v angličtině http://avexdesigns.com/responsive-youtube-embed/

K českým zdrojům o responzivním webu . http://programujte.com/clanek/2013062900-nastroje-responzivniho-webdesignu/