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があれば一通りの事はできそうですね。
関連記事
開発者におすすめのフォント「Ricty」をWindows、MACでインストールする

開発という実務から遠ざかっていたので、2014年!今年は改めてシステム開発を初歩から学んでいこうと思っています。 開発現場の開発ツールを自分なりにいろいろ触れて挑戦していきます! 今回は、開発環境におすすめと話題のフォン […]
Youtubeで再生される動画をデフォルトで高画質に設定 Auto HD For YouTube

製品などの説明を探している際に 最近良くYoutube動画へリンクされている場合があります。 検索エンジンでページを検索した場合、いくつも関連するページが表示されますよね。 されと同じでYoutube内で検索すると関連す […]
MAC OSのディスプレイ解像度を上げて画面を広く使う quickres Display Menu

サブのパソコンをWindows OSのパソコンから、MAC OSのパソコンへ変えてしばらくたちます。 設定方法、MAC OSアプリなどいろいろ利用してみて、Windowsより便利でいいかもしれないと最近になって感じていま […]
nginx worker_processesとworker_cpu_affinityの設定値・方法

数年前からnginxの話題でWEBシステム開発が盛り上がっていました。 そして、社内でもnginxを利用した開発をしているスタッフが多い中 未だにapacheでのWEBサーバー構築しか経験が無い自分としては このタイミン […]
動画制作時に役立つ無料の音楽・BGM素材のダウンロードができるサイト

Youtubeを日頃利用していますが、編集した動画をアップロードするだけで Youtube上の動画編集機能は特に利用していませんでした。 初めはエフェクト系、顔ぼかしなどの加工ツールや、動画に音楽を追加したりしていました […]
YouTube動画を高画質で配信・再生するオプションを探して見る

最近のYouTubeは、高画質の動画をアップロードすれば自動的に高画質の 動画に対応した配信・再生方法を提供してくれます。 再生時間も、アップロードのファイル形式をあまり気にすることなく スマートフォンやビデオカメラ、一 […]