{"id":9810,"date":"2013-04-26T06:59:48","date_gmt":"2013-04-26T06:59:48","guid":{"rendered":"http:\/\/musilda.cz\/?p=218"},"modified":"2013-04-26T06:59:48","modified_gmt":"2013-04-26T06:59:48","slug":"jak-na-responsivni-youtube-video-ve-wordpress","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-na-responsivni-youtube-video-ve-wordpress\/","title":{"rendered":"Jak na responsivn\u00ed Youtube video ve WordPress"},"content":{"rendered":"

S prvky, kter\u00e9 vkl\u00e1d\u00e1me do sv\u00fdch web\u016f, m\u016f\u017ee b\u00fdt \u010dasto probl\u00e9m, p\u0159edev\u0161\u00edm, pokud m\u00e1me responsivn\u00ed design a prvek m\u00e1 nastavenou \u0161\u00ed\u0159ku v pixelech. Typick\u00fdm p\u0159\u00edkladem jsou videa z youtube, kter\u00e1 pak nep\u0159\u00edjemn\u011b kaz\u00ed vzhled str\u00e1nky, p\u0159et\u00e9kaj\u00ed z obsahu do sidebaru a zakr\u00fdvaj\u00ed jin\u00e9 prvky st\u00e1nky. Dal\u0161\u00ed je box pro facebook, kter\u00fd n\u011bkdy rozb\u00edj\u00ed design,ale v tomto \u010dl\u00e1nku se budeme zab\u00fdvat jen videem.<\/p>\n

Typick\u00fd youtube k\u00f3d, se kter\u00fdm se m\u016f\u017eeme setkat, je:<\/p>\n

<\/pre>\n
Iframe m\u00e1 nastavenou pevnou \u0161\u00ed\u0159ku a na men\u0161\u00edch \u0161\u00ed\u0159k\u00e1ch obrazovky to m\u016f\u017ee b\u00fdt probl\u00e9m. \u0158e\u0161en\u00ed je jednoduch\u00e9 a v n\u00e1vodech na n\u011bj m\u016f\u017eete \u010dasto narazit, sta\u010d\u00ed obalit vkl\u00e1dan\u00fd k\u00f3d divem a upravit css:<\/p>\n
\n\n<\/div><\/pre>\n
.video-container {\n\tposition: relative;\n\tpadding-bottom: 56.25%;\n\tpadding-top: 30px;\n\theight: 0;\n\toverflow: hidden;\n}\n\n.video-container iframe,\n.video-container object,\n.video-container embed {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}<\/pre>\n
\u0158e\u0161en\u00ed je to super, ale vhodn\u00e9 je jen v tom p\u0159\u00edpad\u011b, pokud m\u00e1te absolutn\u00ed kontrolu, nad t\u00edm co do str\u00e1nky vkl\u00e1d\u00e1te.
\nTypick\u00fd p\u0159\u00edpad, kdy v\u00e1m tento postup nebude fungovat, je pokud p\u0159ipravujete \u0161ablonu s post format. U post form\u00e1tu „video“ pou\u017e\u00edv\u00e1 Wordpres embeds<\/a> a vlo\u017een\u00ed videa pak vypad\u00e1 takto:<\/p>\n
http:\/\/www.youtube.com\/watch?v=Y5Zy2GkWVFs&feature=share&list=RD11FAlZyajmcIM<\/pre>\n
V\u0161e co je pot\u0159eba dodr\u017eet, je, \u017ee url vlo\u017een\u00e1 do editoru mus\u00ed b\u00fdt na samotn\u00e9 str\u00e1nce. WordPress s\u00e1m pak vytvo\u0159\u00ed k\u00f3d pro embed videa:<\/p>\n
<\/pre>\n
Bohu\u017eel se ji\u017e neobjev\u00ed div, kter\u00fd pot\u0159ebujeme, aby byl prvek responsivn\u00ed. To v\u0161ak m\u016f\u017eeme upravit pomoc\u00ed hooku embed_oembed_html. Do functions.php vlo\u017e\u00edme:<\/p>\n
 function wrap_embed_with_div($html, $url, $attr) {\n     return '
' . $html . '<\/div>';\n}\n\n add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);<\/pre>\n
Embed „obal\u00edme“ divem a v\u0161e funguje jako v p\u0159edchoz\u00edm \u0159e\u0161en\u00ed. Bohu\u017eel v\u0161ak je s touto funkc\u00ed jeden probl\u00e9m a to, \u017ee nefunguje u archive, nebo category. Bohu\u017eel se mi nepoda\u0159ilo zjistit, jak postupovat pro v\u00fdpis kategorie a v\u00fd\u0161e uveden\u00e1 funkce funguje jen na single a page. Pokud budete pot\u0159ebovat pro svou \u0161ablonu upravit i toto, nezbude v\u00e1m nic jin\u00e9ho, ne\u017e vyu\u017e\u00edt jQuery:<\/p>\n
$('embed').wrap('
');<\/pre>\n
Pokud n\u011bkdo zn\u00e1 postup, jak pou\u017e\u00edt hook, m\u00edsto jQuery, budu r\u00e1d, kdy\u017e se pod\u011bl\u00ed. <\/p>\n","protected":false},"excerpt":{"rendered":"
S prvky, kter\u00e9 vkl\u00e1d\u00e1me do sv\u00fdch web\u016f, m\u016f\u017ee b\u00fdt \u010dasto probl\u00e9m, p\u0159edev\u0161\u00edm, pokud m\u00e1me responsivn\u00ed design a prvek m\u00e1 nastavenou \u0161\u00ed\u0159ku v pixelech. Typick\u00fdm p\u0159\u00edkladem jsou videa z youtube, kter\u00e1 pak nep\u0159\u00edjemn\u011b kaz\u00ed vzhled str\u00e1nky, p\u0159et\u00e9kaj\u00ed z obsahu do sidebaru a zakr\u00fdvaj\u00ed jin\u00e9 prvky st\u00e1nky. Dal\u0161\u00ed je box pro facebook, kter\u00fd n\u011bkdy rozb\u00edj\u00ed design,ale v<\/p>\n","protected":false},"author":1,"featured_media":8624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[12,30],"tags":[324,327],"class_list":["post-9810","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-wordpress","tag-responsive-youtube-video","tag-responsivni-youtube-video"],"uagb_featured_image_src":{"full":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/07\/wordpress-tutorial-musilda.png",1200,800,false],"thumbnail":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/07\/wordpress-tutorial-musilda-150x150.png",150,150,true],"medium":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/07\/wordpress-tutorial-musilda-300x200.png",300,200,true],"medium_large":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/07\/wordpress-tutorial-musilda-768x512.png",640,427,true],"large":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/07\/wordpress-tutorial-musilda-1024x683.png",640,427,true],"1536x1536":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/07\/wordpress-tutorial-musilda.png",1200,800,false],"2048x2048":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/07\/wordpress-tutorial-musilda.png",1200,800,false],"archive-list":["https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/07\/wordpress-tutorial-musilda-400x265.png",400,265,true]},"uagb_author_info":{"display_name":"Affinite","author_link":"https:\/\/affinite.io\/cs\/author\/affinite\/"},"uagb_comment_info":1,"uagb_excerpt":"S prvky, kter\u00e9 vkl\u00e1d\u00e1me do sv\u00fdch web\u016f, m\u016f\u017ee b\u00fdt \u010dasto probl\u00e9m, p\u0159edev\u0161\u00edm, pokud m\u00e1me responsivn\u00ed design a prvek m\u00e1 nastavenou \u0161\u00ed\u0159ku v pixelech. Typick\u00fdm p\u0159\u00edkladem jsou videa z youtube, kter\u00e1 pak nep\u0159\u00edjemn\u011b kaz\u00ed vzhled str\u00e1nky, p\u0159et\u00e9kaj\u00ed z obsahu do sidebaru a zakr\u00fdvaj\u00ed jin\u00e9 prvky st\u00e1nky. Dal\u0161\u00ed je box pro facebook, kter\u00fd n\u011bkdy rozb\u00edj\u00ed design,ale v","_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9810"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=9810"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9810\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8624"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=9810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=9810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=9810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}