Stále čím dál víc začíná stoupat návštěvnost z mobilních zařízení. Proto se stávají populární tzv. responzivní web design. Tedy jeden design pro všechna zařízení. Pouze se prvky přizpůsobí danému zařízení a velikosti. Při tvorbě takového vzhledu je ale nutné si dávat pozor na každý prvek. Protože i jeden prvek, vám může celý vzhled rozhodit. Jeden takový prvek, je vložené video z YouTube. V dnešním článku vám tedy ukážu, jak vytvořit z klasického YouTube videa, video které se přizpůsobí jakékoliv obrazovce.

Hlavním krokem je celé video z YouTube obalit DIVem, který umožní nám nastavit parametry pro automatické přizpůsobení. Tento div nazveme třeba video-container.

<div class="video-container">EMBED KÓD</div>

Pokud vytváříte vzhled pro redakční systém WordPress, tak tu pro vás mám jeden kousek kódu, který se automaticky postará, že vám všechny vložená videa vloží do tohoto DIVu.

//Vlastni embed

function youtube_div($html, $url, $attr) {
if(strpos($url, 'youtu.be') !== false || strpos($url, 'youtube.com') !== false){

return '<div class="video-container">' . $html . '</div>';

}
else {
return $html;
}}

add_filter('embed_oembed_html', 'youtube_div', 10, 3);

Video by jsme tedy měli obalené potřebným DIVem a teď je ještě potřeba přidat styly vytvořené třídě.

/* Video kontejner */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Tak a nyní, když vložíte jakékoliv video z YouTube, tak se přizpůsobí vašemu zařízení 😉 .