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

2017年12月20日stinger3 備忘録スマホ, ユーチューブstinger3 備忘録, ユーチューブ

stinger3

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

 

 

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

 

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

 

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

 

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

 

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

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

 

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

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

 

youchube007

 

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

 

YouTube動画埋め込み方法

 

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

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

 

ユーチューブ動画

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

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

 

 

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

 

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

 

youchube002

 

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

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

 

youchube003

 

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

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

 

 

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

 

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

 

youchube004

 

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

 

youchube006

 

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

 

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

 

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

 

スタイルシート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>
のようなコードになります。

 

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

 

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

 

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

 

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

 

スマホで観ると

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

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