スマホ対応しよう☆you tube動画をレシポンシブ表示にするには、埋め込みコードにちょっと追加でOK。

タグ

自分のサイトでyoutubeの動画を紹介したい時、埋め込みコードを使って表示させることができますね。

でも、パソコンで見る時は気にならなくても、スマホで表示させると画面からはみ出してしまったりします。

そんな時は、埋め込みタグにちょっとだけ追加しておきましょう☆

↓↓↓ポチッと応援クリックしていただけると感激ですヽ(^o^)丿

にほんブログ村 小遣いブログ アフィリエイトへ  

ワードプレスのテンプレートがレスポンシブであっても、Youtube動画は画面に合わせて拡大・縮小してくれず、パソコンでチェックしただけではスマホ表示で崩れてしまっていることに気が付かないことがありました。

もしかして、この点を改良してあるテンプレートもあったりするのかもしれませんが、動画を載せる時は、自分で使っているテンプレートの表示を確認してみましょうね。

タグ

テンプレートのCSSなんかをちょっといじるだけという対応の仕方もあるようで、動画を頻繁に載せたい場合はその方がいいかもしれません。

が、今回は動画の方の埋め込みコードにちょっとだけプラスする方法です。



次のコードを、埋め込みコードに加えます。

style=”max-width:100%;”

例えば、以下のような動画のコードがあったとします。これはYoutubeの埋め込みコードをそのままコピペしたもの。

(ですが、そのままだと動画が表示されてしまうので、<>(半角)は、<>(全角)に変えてあります。)



<iframe width=”420″ height=”315″ src=”https://www.youtube.com/embed/rk30eNJys9U” frameborder=”0″ allowfullscreen></iframe>

↓このコードを、下記のようにします。

<iframe style=”max-width:100%;” width=”420″ height=”315″ src=”https://www.youtube.com/embed/rk30eNJys9U” frameborder=”0″ allowfullscreen></iframe>

↓<>をもとの半角に戻すと・・・こんな動画でした(^^)



参考サイト http://fooline.net/youtube-iframe/

コメントを残す

CAPTCHA