web-dev-qa-db-ja.com

YouTubeの埋め込みを上書きする方法

URLを投稿に貼り付ける方法が本当に好きです。

http://youtube.com/watch?v=xyzまたはhttp://vimeo.com/123456

ここからコードをサポートするために、これのデフォルトコードを変更します。 http://embedresponsively.com/

どうやって私はYouTubeやVimeoのコードを上書きすることができます、私はどういうわけかfunctions.phpで想定していますか？

phpfunctionsfiltersembedvideos
2
Tallboy

そのサイトで提供されているコードをよく見ると、WordPressがデフォルトで出力するものとの主な違いは次のようです。

  • iframeはembed-containerのクラスを持つdivでラップされています
  • そのクラスで使用されているCSSスタイルがあります。

WordPressで埋め込みiframeをラップするには、テーマのfunctions.phpまたは機能プラグインに以下を追加します。

add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
return '<div class="embed-container">' . $html . '</div>';
}

そして、 http://embedresponsively.com/ によって生成されたCSSをあなたのテーマに追加してください：

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto;
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
}

私はフィルターをテストしました、そしてそれはちょうどうまくいきました。私はCSSをテストしませんでした、それはあなたと遊ぶのはあなた次第です。

フィルタのソース： http://wordpress.org/support/topic/adding-a-wrapping-div-to-video-embeds?replies=2

1
richardmtl