サイトに埋め込みするYouTube動画をスマホサイズに最適化する方法

サイトに埋め込みするYouTube動画をスマホサイズに最適化する方法

について解説している動画です。

レビュー：★★★★

 

《ここがオススメ》

・YouTubeの埋め込み動画をスマホサイズに

自動調整する方法について説明した動画です。

・簡単なコードの追記で自動調節が可能になり、

そのコードをまるごと紹介してくれます。

 

 

《この動画の要約》

・YouTubeの動画は自分のサイトに埋め込むことができる。

・PCでは普通に動画が表示されても、

スマホで見ると表示がくずれている場合がある。

 

・例えば動画の横幅がはみ出して

半分しか映っていないケースである。

・はみ出すと不格好なので、

PCで見るときと同様にスマホでも横幅を合わせたい。

 

・そんなときには記事に手を加える必要はない。

・CSS(スタイルシート)への簡単なコード追記で可能になる。

・ワードプレスであればCSS(スタイルシート)のどこかに

以下のコードを記載するだけである。
iframe {
position: relative;
top: 0;
left: 0;
width: 100%;
}

・そしてファイルを更新を押す。

 

 

《一言》

HTMLサイトでもCSS(スタイルシート)の中に

書き込むことで同じことが実現できます。

なおワードプレスのテーマやテンプレートによっては

自動調整されない可能性があるので注意してください。

 

スマホ表示をパソコンで見ることができるサイトとして

Responsive Design Testingがあるので、

修正後スマホ表示で問題ないかを確認することを

おすすめします。