埋め込みYoutube動画のスマホサイズを簡単に最適化する方法
すごい簡単にできるYoutube動画のスマホサイズ最適化
Wordpressとかで、Youtube動画を埋め込んでも、スマホで最適化されない。。。縦長になる。横が切れるなどかなりイケていない状況に陥ってこのページを見ている方も多いのではないでしょうか。
PCで見る分にはいいんですが、スマホだと綺麗ではなくてかなり苛立っていました。
で解決する方法を探していたのですが、あんまりいい方法がありませんでした。*ちゃんと解決法書きます。
だいたいTOPに来るのが、HTMLの方で、dev classを指定して〜とかありますが、面倒くさいなぁというのばかり。
だって、今までだって動画埋め込んできたし、それら全てを確認してHTML書き直したり修正したりするのなんて超面倒です。(1発でできなくもないでしょうが。)
なので、頭をひねりました。
どんな埋め込み方でも基本iframe
みなさんYoutube動画埋め込む時はどうしてますか？
基本2パターンあると思うんですが、1つ目はこのhttps:~~~をそのまま貼るパターン。iframeで貼らなきゃいけないとか思ってる人いるかもしれませんが、これ貼るだけでいいんですよ。実は。。。
2つ目のパターン。iframeで貼るパターンですね。
その他にもあるかもしれませんが、基本的にはこの二つですね。
https〜〜〜の方も貼り付けると結局iframeになっているんですよね。ソース見ると。
なので、iframeにだけCSS指定すれば解決です。(iframe多用してる人はごめんなさい。)
CSS設定のやり方
Media Queriesを使います。Media Queriesについては、この記事を読んでいただければ。だいたいこんな感じで書かれてますよね。
@media only screen and (max-width: 780px)
先ほど修正したサイトは@media (max-width: 420px)みたいな感じだったので、サイト毎に違うとおもいます。@mediaとかMedia Queriesとかで、ソース内検索していただければわかるとおもいます。
こんな感じで貼っていただければ。
@media (max-width: 420px) {
iframe {
max-width: 100%;
height: 200px;
}
}
widthを420にしたのは、iphone 6+がwidth415pxだったから。heightは、少し小さめな携帯サイズ(5sとか)を考慮してきつめにしました。なので200px。
これでいい感じになるとおもいます。
他にあれば、twitterで是非教えてください！以上！