スマホ対応のサイトでのYouTube崩れ防止方法

Tweet

Pocket

よく聞く話し・・・僕も経験がありますが・・・

スマホであるサイトを見ていたら、記事中に面白そうなYouTubeが埋め込まれている。

「あ～面白そうだな～」

でも、そのYouTubeは記事内からはみ出て再生ボタンが押せな～い。

「見れへんやん（怒）」

これは、スマホ対応（レスポンシブ）のブログやサイトでの記事更新時に、YouTubeの埋め込みコードをそのままコピペしてしまったのが原因です。

スマホ対応（レスポンシブ）のブログやサイトでは、PC・タブレット・スマホでの閲覧時に、それぞれが見やすくなるようにページの大きさやレイアウトが自動的に変わります。しかし、YouTubeの埋め込みコードをそのままコピペした場合、大きさが変わらず、スマホなどの小さなモニターで見た時に画面からはみ出してしまう場合があります。

それでも上手く再生ボタンが押せたらYouTubeが起ち上がるので、閲覧者が動画を見る事ができますが、最悪再生ボタンが押せない場所にはみ出た場合には、せっかく作った動画を閲覧者に見て貰う事ができません。

では、こうならない為にはどうしたら良いのでしょう？

今は、すごく便利な時代ですね♪

「embedresponsively」と言う無料のサービスを使ってください!!

ぶっちゃけ何て読むのか分かりませんが（笑）・・・誰でも簡単に使えます。

まずは、下記のサイトを開いてください。

embedresponsivelyサイト

すると、とてもシンプルなサイトが開いたと思います。

このページの真ん中にあるバーの中にYouTubeの共有URLをコピペして、右側の「埋め込み」ボタン（英語かもしれない）を押すと自動的にYouTubeの埋め込みコードが生成されます。

後は、ブログの記事投稿フォームを「テキスト（ワードプレス）」または「HTML表示（アメブロ）」に変更して、この埋め込みコードをコピペしたら埋め込み終了です。

ただし、ワードプレスの方は一つだけ注意点が有って、原因は分かりませんが、投稿フォームの「テキスト」を「ビジュアル」に戻すと、何故か自動的にYouTubeの埋め込みコードが化けてしまって記事更新後にページ表示すると記事内のYouTube画面が横長になって崩れてしまいます。

なので、最後まで記事を書きあげた後、一番最後に「テキスト」に切り替え埋め込みコードをコピペするようにしてください。
（※僕がこれで何度も失敗したので参考までに）

するとこんな感じで綺麗にページ枠にハマります⇓

 このページをPC・タブレット・スマホ等どの機種で見ても上記のYouTubeは綺麗にレイアウトの枠内に収まってるはずです。

尚、さっき確認したら、アメブロはYouTubeの埋め込みコードのコピペだけで大丈夫のようです。iPhoneでも綺麗に表示されていました。

なので、これから、もしくは現在ワードプレスを使ってる方はしっかりチェックしておいてくださいね。

余談ですが、上記YouTubeは久保田利伸の「Cymbals」です。もう何十年も久保田ファンの僕としては、この曲に癒されます（笑）さ～6月は2年ぶりにライブに行くぞ～頑張ろう!!

contact

関連記事