Instruktážní videa patří k zajímavému obohacení obsahu webových stránek a při tvorbě webu a následné SEO optimalizaci určitě zajímavým doplňkem. Pokud nevíte, jak takové youtube video do vašich webových stránek vložit, pak jsem pro vás připravila následující instruktážní video. Uvidíte, že vkládání youtube videa s určením vlastní šířky a výšky není vůbec nic složitého.

Poznámka: Kód vkládejte do Editoru, který je přepnut na režim HTML.

Jak udělat responzivní youtube video?

Pokud vaše šablona nezvládá responzivní videa a při zobrazování na tabletech či mobilech video “vybíhá” mimo rámec, pak je jednoduchá pomoc. 

1) v HTML editoru pro psaní link videa obložte <div> – např. takto:

<div class=”video”>

*<iframe src=”https://www.youtube.com/embed/sibAPW5YKcw” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

</div>

2) do vašeho souboru CSS vložte následující kód:

.video {position: relative; padding-bottom: 55%; padding-top: 30px; height: 0; overflow: hidden;}

.video iframe,

.video object,

.video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

* odkaz videa samozřejmě zaměňte za váš 🙂