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 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:

.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:

http://www.youtube.com/watch?v=Y5Zy2GkWVFs&feature=share&list=RD11FAlZyajmcIM

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:

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 '
' . $html . '
';
}

 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('
');

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