web-dev-qa-db-ja.com

o埋め込みYouTubeビデオのアスペクト比

リンクを挿入するだけで投稿にyoutubeビデオを挿入すると（ http://youtu.be/KvtkknNawCQ ）。ビデオのアスペクト比は4：3になります。 16：9に変更するにはどうすればよいですか？

youtubeoembed
1
Aeon Wallace

Wordpressは正しいアスペクト比でビデオを埋め込むのにかなり良い仕事をします。埋め込みビデオの幅は、テーマのfunctions.phpファイルで設定された content width に基づいています。このため、テーマのiframe要素に適用されているいくつかのスタイルがサイズを変更しているように見えます。

ビデオの周りに見苦しい黒い境界線を表示せずに、レスポンシブレイアウト内の任意の幅でビデオが機能するようにするには、いくつかの追加手順を実行する必要があります。

まず、埋め込みビデオをdivにラップして、スタイルを適用できるようにする必要があります。 functions.phpファイルに以下を追加します。

function mythemename_wrap_embeds( $html, $url, $attr, $post_id ) {
    return '<div class="video">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'mythemename_wrap_embeds', 10, 4 );

次に、 固有の比率 を設定するいくつかのスタイルを追加して、幅が変化したときにビデオの高さが比例して拡大するようにします。

.video {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.video:before {
    content: "";
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    display: block;
    overflow: hidden;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video：before要素はパディングを使用して、親である.video divを基準にして高さを設定します。 56.25％は、9を16で割って算出した16：9の比率です。

アスペクト比を動的に処理する必要がある場合は、上記の手順をスキップして FitVids のようなjQueryプラグインを使用できます。

4
Dylan