YouTubeのiframe動画共有タグをWordPressに設置する(レスポンシブ対応)
先日
低価格な可変式NDフィルターNew-View Pro Fader NDのレビュー評価
の記事内で、撮影した動画をYouTubeにアップロード、その動画をYouTubeの共有タグを利用して
記事内に設置したところ、当然デフォルトでは、レスポンシブWEBデザインに対応していないので
スマートフォンやタブレット端末で記事を見ると、動画が画面からはみ出して表示されてしまいます。
画面サイズを横320程度に抑える形でカスタムタグを作成すれば
簡単に解決しますが(小さい画面の場合)、今度はパソコンなどの高解像度で記事を表示した際
何とも言えない不格好なYouTube動画を表示してしまいます。
折角、サイト全体がレスポンシブWEBデザインに対応しているのだから
YouTube動画もレスポンシブに対応させたいところです。
YouTube上から共有タグを取得する際に、それらしきオプションが無いのか?
確認してもやっぱりありませんね。
自分でCSSやタグを作成しないといけないのかな~っと
思いつつもインターネット(Google)を検索すると
たくさんの情報がヒットしました。(みんな考える事がいっしょなんですね)
■参考にしたページ(そのままコピペですが・・・)
webdesignerwall.com/tutorials/css-elastic-videos
YouTube動画をレスポンシブに対応させるコード自体は少ないので
そのままコピペでCSSや、共有タグの上にdivコンテナを追加するだけです。
▼CSS(スタイルシート)
wordpressのデフォルトcss(style.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%;
}
▼HTMLタグ + YouTube動画埋め込みコード
記事内のYouTube動画を表示させたい位置、YouTubeのiframeタグを挟む形でdivを追加
<div class="video-container">
<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
■サンプル動画
YouTube以外にもVimeoに対応しており、このCSSがあれば一通りの事はできそうですね。
関連記事
WordPress 無限ループのリダイレクトエラー・不具合を解決する方法
![WordPress 無限ループのリダイレクトエラー・不具合を解決する方法](https://takechi-tateki.com/wp-content/themes/takechi-tateki.com/images/blank_240x135.png)
前までは普通に使えていたWordpressがある時から、無限ループでリダイレクトエラーになってしまう。 (サーバーを変更したのが原因?) 管理画面にログインした状態だとリダイレクトエラーになっていました。 ログインしてい […]
WordPress 3.8.1 自動アップデートで指定したプラグインを除外する方法は?
![WordPress 3.8.1 自動アップデートで指定したプラグインを除外する方法は?](https://takechi-tateki.com/wp-content/themes/takechi-tateki.com/images/blank_240x135.png)
昨日Wordpressの自動アップデート設定を正しく行ったところ 無事に自動更新されていました。 いいですね~便利ですね~ これで、わざわざ更新画面を表示して更新ボタンを押さなくても良くなりました。 バージョンが古いもの […]
WEBサーバーnginxのキャッシュで失敗した設定 proxy_cache fastcgi_temp
![WEBサーバーnginxのキャッシュで失敗した設定 proxy_cache fastcgi_temp](https://takechi-tateki.com/wp-content/themes/takechi-tateki.com/images/blank_240x135.png)
みなさん、こんにちは武智建樹です。 最近、暇があればnginxをポチポチ触っていろいろな設定を自分の目で見て楽しんでいます。 さて、今回はnginxのキャッシュに挑戦してみました。 wordpressの高速化!キャッシュ […]
nginxの勉強はlocationディレクティブの設定がキモ? 前方一致 正規表現
![nginxの勉強はlocationディレクティブの設定がキモ? 前方一致 正規表現](https://takechi-tateki.com/wp-content/themes/takechi-tateki.com/images/blank_240x135.png)
みなさんこんにちは 最近apacheからnginxに移行しちゃおうとポチポチ遊んでいる武智建樹です。 (今日からはじめのフレーズを入れてみました。。。) nginxの設定を他のサイトを参考にしながら、いろいろ試し利用して […]
WordPress WPtouchで ob_start(): Cannot use output buffering エラー
![WordPress WPtouchで ob_start(): Cannot use output buffering エラー](https://takechi-tateki.com/wp-content/themes/takechi-tateki.com/images/blank_240x135.png)
Wordpressのテーマで、レスポンシブデザインを利用するようになってからは WordpressのプラグインWPtouch(スマートフォン対応化)を利用する機会が減りました。 スマートフォン初期の頃にお世話になったプラ […]
Nexus Player用にYoutubeへ4K動画をアップロード・編集は使える?
![Nexus Player用にYoutubeへ4K動画をアップロード・編集は使える?](https://takechi-tateki.com/wp-content/themes/takechi-tateki.com/images/blank_240x135.png)
Nexus Playerにkodiなどのメディアプレイヤーをインストールして、大容量の高画質4K動画を再生するには厳しいと感じ、相性が良いYoutubeサービスを利用することにしました。 事前に、他のユーザーさんがアップ […]