YouTube動画をホームページやブログに投稿することが多いと思います。
WordPressにはoEmbed機能があり、YouTubeのURLを貼り付けるだけで動画の貼り付けが出来ます。
しかし、この時ホームページのスマホ対応している場合は、横幅が固定されて画像のみ大きく表示されることになります。
そこで、動画埋め込みのレスポンシブ対応方法をご紹介します。
WordPressのYouTube動画埋め込み方法
- YouTubeサイトでWordpressに貼り付けたい動画表示します。
- 共有を選択します。
- この動画を共有のURLをコピーする。
- コピーした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動画のレスポンシブ対応が出来たと思います。
「WordPressでYouTube動画埋め込みのレスポンシブ(スマホ)対応」への1件のフィードバック