灯台下暗し。FC2ブログで、スマホ表示でも崩れずにYouTube埋め込みをする方法。

ブログ運営関連
09 /20 2015
ssyou3.png

昨夜アップしたダイハツ ウェイクのトミカの記事ですが、CMが有名なクルマだったので、公式YouTubeアカウントから埋め込みでCM動画を入れてみました。実車の映像もみれるとミニカーレビューの新たな楽しみが提供できていい感じですね。

IMG_8599 (1)

が、普段私自身スマホからでもPC表示を好んでみていたので、すっかり見落としていましたが、スマホ表示にするとこんなことに。単純にとてもかっこわるい。これはなんとかしたい!ということで方法を考えていましたが、あっさり解決したので備忘メモに。


ssyou32.png

今まではYouTubeの共有機能で埋め込みコードを取得していましたが、これだとサイズが指定されてしまうのでスマホ表示にした時に上のようになってしまうわけですね。適当に100%に書き換えてしまえば解決かと思いきやそれだと縦横の表示される比率がかわってしまうようなので、頭を抱えていましたが、CSSで条件を書き足すとうまくいく…らしいです。

Sponsored Link

が、それを実践するまえにふと思いついて試してみたのがこれ。

ssyou50.png

FC2ブログの編集画面って、いちばんうえにちっちゃいアイコンが沢山並んでるんですよね。で、よく見るとYouTubeのロゴが。

ssyou59.png

このアイコンをクリックして、URLを打ち込んで埋め込んでみると


IMG_8600 (1)

じゃーん!FC2の標準機能なので、FC2のスマートフォン表示でもちゃんとそれにサイズを修正してくれるようです。

ssyou(1).png

パソコン表示でも、さっきと比率は変わってしまいましたが、見た目に問題はなさそうなので気にしません。


もっとちゃんとやれば、ウインドウのサイズにあわせて自動調整とかできるんだと思いますが、最初に触れたスマホ表示ではみ出してしまうことに困っていた方はこれで一発で解決です。
Sponsored Link


 

コメント

非公開コメント

Sponsored Link


にほんブログ村 コレクションブログ ミニカーへ Push7で購読する follow us in feedly Twitterボタン Instagramボタン

“86/BRZまとめ”

“初回特別カラーまとめ”

Sponsored Link