YouTubeをスマホで観てもはみ出さないようにする方法
スマホでYouTube動画を観てもはみ出ないように、CSSでカスタ
マイズして最適化する方法を解説します。
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
尚、修正したソースコードは、必ずFTPソフトを使ってサーバー
にアップ。または各サーバーのオプション(ファイルマネージ
ャー)等(例はさくらサーバーです)で編集してください。
バックアップは忘れずに!!!
現在の新しいテーマはほとんどがレスポンシブデザイン、いわゆる
PC画面からタブレット・スマホまで、全ての画面の大きさに対応し
て、見やすく表示するデザインに対応するようになりましたね!。
私もスマホ対応のテーマを使っていたので、全て自動的にスマホ対
応画面になっているものだと安心していました。
ある時、たまたま友人のスマホを借りて自分のブログを観ていたら、
youtube動画だけが、記事からはみ出ていることに気づいた。
なんとPCから昔の自分のブログ記事を観てみたらはみ出ていた。
ブログに紹介したい動画を貼り付けて載せる場合、そのまま埋め込
みコードを貼り付けただけでは、PCやスマホで見ると、画像がは
み出る事があります。
それは、横と縦の大きさが固定幅で設定されているからです。
YouTube動画埋め込み方法
ブログ本文にYouTube動画を貼り付ける方法を解説します。
ユーチューブにアクセスします。
ブログに貼り付けたい動画をクリックして表示させます。
動画が再生されるので一時停止したほうがいいと思います。
YouTube動画を貼り付ける方法 1
次に動画の画面上にマウスを持って行き、右クリックします。
すると上図のようなタブが出てくるので、「埋め込みコードを取
得」をクリックします。
クリックしたら以下のようなコードが出るので、それをコピーしま
す。
以下がこの動画の埋め込みコードです。
<iframe width=”854″ height=”510″ src=”//www.youtube.com/embe
d/fySqsvfRI4E” frameborder=”0″ allowfullscreen></iframe>
YouTube動画を貼り付ける方法 2
動画の下のほうに“共有”ボタンをクリックします。
次に“埋め込みコード”ボタンをクリックすると、以下のような画
面になると思います。
ここでは動画のサイズが指定できます。
サイズを指定したら上にあるコードをコピーします。
コピーしたコードをブログの本文に貼り付ければ完成です。
尚、コピーしたコードはメモ帳等に貼り付けて置いたほうが便利で
す。
スタイルシートCSSに下記コードを追記
子テーマを使用している方は子テーマの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%;
}
[/css]
次に貼り付けたい動画コードに以下コードで囲みます。
[css]
<div class="video-container">
貼り付けたい動画コード
</div>
[/css]
例えば、先ほど取得したコードだと
<div class=”video-container”>
<iframe width=”854″ height=”510″ src=”//www.youtube.com/e
mbed/fySqsvfRI4E” frameborder=”0″ allowfullscreen></iframe>
</div>
のようなコードになります。
上記コードをブログの投稿記事に貼り付けます。
ワードプレスの「新規投稿」内の“テキスト”タブを開いて、そこ
にコードを貼り付けます。
“ビジュアル”の方ではありません。
記事を投稿してブログを観てみます。
スマホで観ると
これでスマホでブログを観られても、記事本文からはみ出さないで
表示されるようになりました。
ただスマホやタブレット等全てを確認していません。もしかしたら
動画がはみ出る端末があるかもね!!
コメント