YouTube動画をホームページやブログに投稿することが多いと思います。
WordPressにはoEmbed機能があり、YouTubeのURLを貼り付けるだけで動画の貼り付けが出来ます。

しかし、この時ホームページのスマホ対応している場合は、横幅が固定されて画像のみ大きく表示されることになります。

そこで、動画埋め込みのレスポンシブ対応方法をご紹介します。

WordPressのYouTube動画埋め込み方法

1. YouTubeサイトでWordpressに貼り付けたい動画表示します。
2. 共有を選択します。
3. この動画を共有のURLをコピーする。
4. コピーしたURLをそのままWordPressの投稿に貼り付ける。

これだけで下記のようにYouTube動画を貼り付けることが出来ます。

YouTube動画のレスポンシブ対応

但し、上記の対応では、レスポンシブなデザイン時には、動画が固定表示されてしまいます。

そこで、下記対応を行います。

動画のレスポンシブ対応のためのfunction.php追加

次に、function.php に下記を追加します。

function tdd_oembed_filter($html, $url, $attr, $post_ID) {
  if ( strstr( $url,'youtu' ) ) {
    $return = '<figure class="video-container">'.$html.'</figure>';
  }else{
    $return = $html;
  }
  return $return;
}
add_filter( 'embed_oembed_html', 'tdd_oembed_filter', 10, 4 ) ;

HTML5対応ではないときは、「figure」と「/figure」を「div」と「/div」に変更して下さい。

動画のレスポンシブ対応のためのCSS追加

下記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%;
}

これで、YouTube動画のレスポンシブ対応が出来たと思います。

Tweet

[`evernote` not found]