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 ?
- Mít přístup k css stylům
- 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="https://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)):
K českým zdrojům o responzivním webu . https://programujte.com/clanek/2013062900-nastroje-responzivniho-webdesignu/