Jak na responsivní Youtube video ve WordPress

S prvky, které vkládáme do svých webů, může být často problém, především, pokud máme responsivní design a prvek má nastavenou šířku v pixelech. Typickým příkladem jsou videa z youtube, která pak nepříjemně kazí vzhled stránky, přetékají z obsahu do sidebaru a zakrývají jiné prvky stánky. Další je box pro facebook, který někdy rozbíjí design,ale v tomto článku se budeme zabývat jen videem.

Typický youtube kód, se kterým se můžeme setkat, je:

<iframe width="560" height="315" src="http://www.youtube.com/embed/FAlZyajmcIM" 
frameborder="0" allowfullscreen></iframe>

Iframe má nastavenou pevnou šířku a na menších šířkách obrazovky to může být problém. Řešení je jednoduché a v návodech na něj můžete často narazit, stačí obalit vkládaný kód divem a upravit css:

<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/FAlZyajmcIM" 
frameborder="0" allowfullscreen></iframe>
</div>
.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%;
}

Řešení je to super, ale vhodné je jen v tom případě, pokud máte absolutní kontrolu, nad tím co do stránky vkládáte.
Typický případ, kdy vám tento postup nebude fungovat, je pokud připravujete šablonu s post format. U post formátu „video“ používá Wordpres embeds a vložení videa pak vypadá takto:

Vše co je potřeba dodržet, je, že url vložená do editoru musí být na samotné stránce. WordPress sám pak vytvoří kód pro embed videa:

<embed src="http://v.wordpress.com/hrPKeL5t" type="application/x-shockwave-flash" 
width="960" height="540" allowscriptaccess="always" allowfullscreen="true" wmode="transparent">

Bohužel se již neobjeví div, který potřebujeme, aby byl prvek responsivní. To však můžeme upravit pomocí hooku embed_oembed_html. Do functions.php vložíme:

 function wrap_embed_with_div($html, $url, $attr) {
     return '<div class="video-container">' . $html . '</div>';
}
 
 add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);

Embed „obalíme“ divem a vše funguje jako v předchozím řešení. Bohužel však je s touto funkcí jeden problém a to, že nefunguje u archive, nebo category. Bohužel se mi nepodařilo zjistit, jak postupovat pro výpis kategorie a výše uvedená funkce funguje jen na single a page. Pokud budete potřebovat pro svou šablonu upravit i toto, nezbude vám nic jiného, než využít jQuery:

$('embed').wrap('<div class="video-container">');

Pokud někdo zná postup, jak použít hook, místo jQuery, budu rád, když se podělí.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

1 Comment

  1. Marek L.

    Nemal by si záujem písať návody o wordpresse aj pre iný web ? (3-4 do týždňa, neskôr viacej). V prípade záujmu ma kontaktuj. Nejedná sa o komerčný projekt, ale o rozvoj komunity a prinášanie noviniek o WP.

    Reply

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.