YouTubeをスマホで観てもはみ出さないようにする方法

 

 

スマホでYouTube動画を観てもはみ出ないように、ＣＳＳでカスタ
マイズして最適化する方法を解説します。

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

 

尚、修正したソースコードは、必ずＦＴＰソフトを使ってサーバー
にアップ。または各サーバーのオプション（ファイルマネージ
ャー）等（例はさくらサーバーです）で編集してください。

 

バックアップは忘れずに！！！

 

現在の新しいテーマはほとんどがレスポンシブデザイン、いわゆる
PC画面からタブレット・スマホまで、全ての画面の大きさに対応し
て、見やすく表示するデザインに対応するようになりましたね！。

私もスマホ対応のテーマを使っていたので、全て自動的にスマホ対
応画面になっているものだと安心していました。

 

ある時、たまたま友人のスマホを借りて自分のブログを観ていたら、
youtube動画だけが、記事からはみ出ていることに気づいた。

なんとＰＣから昔の自分のブログ記事を観てみたらはみ出ていた。
ブログに紹介したい動画を貼り付けて載せる場合、そのまま埋め込
みコードを貼り付けただけでは、ＰＣやスマホで見ると、画像がは
み出る事があります。

 

 

それは、横と縦の大きさが固定幅で設定されているからです。

 

YouTube動画埋め込み方法

 

ブログ本文にYouTube動画を貼り付ける方法を解説します。

ユーチューブにアクセスします。

 

ユーチューブ動画

ブログに貼り付けたい動画をクリックして表示させます。

動画が再生されるので一時停止したほうがいいと思います。

 

 

YouTube動画を貼り付ける方法　１

 

次に動画の画面上にマウスを持って行き、右クリックします。

 

 

すると上図のようなタブが出てくるので、「埋め込みコードを取
得」をクリックします。

クリックしたら以下のようなコードが出るので、それをコピーしま
す。

 

 

以下がこの動画の埋め込みコードです。

<iframe width=”854″ height=”510″ src=”//www.youtube.com/embe
d/fySqsvfRI4E” frameborder=”0″ allowfullscreen></iframe>

 

 

YouTube動画を貼り付ける方法　２

 

動画の下のほうに“共有”ボタンをクリックします。

 

 

次に“埋め込みコード”ボタンをクリックすると、以下のような画
面になると思います。

 

 

ここでは動画のサイズが指定できます。

 

サイズを指定したら上にあるコードをコピーします。
コピーしたコードをブログの本文に貼り付ければ完成です。

 

尚、コピーしたコードはメモ帳等に貼り付けて置いたほうが便利で
す。

 

スタイルシートＣＳＳに下記コードを追記

 

子テーマを使用している方は子テーマのＣＳＳに、子テーマを使用
していない方は親テーマの最後に追記してください。

[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>
のようなコードになります。

 

上記コードをブログの投稿記事に貼り付けます。

 

ワードプレスの「新規投稿」内の“テキスト”タブを開いて、そこ
にコードを貼り付けます。

 

“ビジュアル”の方ではありません。

 

記事を投稿してブログを観てみます。

 

スマホで観ると

これでスマホでブログを観られても、記事本文からはみ出さないで
表示されるようになりました。

ただスマホやタブレット等全てを確認していません。もしかしたら
動画がはみ出る端末があるかもね！！