スマホ対応のサイトでのYouTube崩れ防止方法
よく聞く話し・・・僕も経験がありますが・・・
スマホであるサイトを見ていたら、記事中に面白そうなYouTubeが埋め込まれている。
「あ~面白そうだな~」
でも、そのYouTubeは記事内からはみ出て再生ボタンが押せな~い。
「見れへんやん(怒)」
これは、スマホ対応(レスポンシブ)のブログやサイトでの記事更新時に、YouTubeの埋め込みコードをそのままコピペしてしまったのが原因です。
スマホ対応(レスポンシブ)のブログやサイトでは、PC・タブレット・スマホでの閲覧時に、それぞれが見やすくなるようにページの大きさやレイアウトが自動的に変わります。しかし、YouTubeの埋め込みコードをそのままコピペした場合、大きさが変わらず、スマホなどの小さなモニターで見た時に画面からはみ出してしまう場合があります。
それでも上手く再生ボタンが押せたらYouTubeが起ち上がるので、閲覧者が動画を見る事ができますが、最悪再生ボタンが押せない場所にはみ出た場合には、せっかく作った動画を閲覧者に見て貰う事ができません。
では、こうならない為にはどうしたら良いのでしょう?
今は、すごく便利な時代ですね♪
「embedresponsively」と言う無料のサービスを使ってください!!
ぶっちゃけ何て読むのか分かりませんが(笑)・・・誰でも簡単に使えます。
まずは、下記のサイトを開いてください。
すると、とてもシンプルなサイトが開いたと思います。
このページの真ん中にあるバーの中にYouTubeの共有URLをコピペして、右側の「埋め込み」ボタン(英語かもしれない)を押すと自動的にYouTubeの埋め込みコードが生成されます。
後は、ブログの記事投稿フォームを「テキスト(ワードプレス)」または「HTML表示(アメブロ)」に変更して、この埋め込みコードをコピペしたら埋め込み終了です。
ただし、ワードプレスの方は一つだけ注意点が有って、原因は分かりませんが、投稿フォームの「テキスト」を「ビジュアル」に戻すと、何故か自動的にYouTubeの埋め込みコードが化けてしまって記事更新後にページ表示すると記事内のYouTube画面が横長になって崩れてしまいます。
なので、最後まで記事を書きあげた後、一番最後に「テキスト」に切り替え埋め込みコードをコピペするようにしてください。
(※僕がこれで何度も失敗したので参考までに)
するとこんな感じで綺麗にページ枠にハマります⇓
このページをPC・タブレット・スマホ等どの機種で見ても上記のYouTubeは綺麗にレイアウトの枠内に収まってるはずです。
尚、さっき確認したら、アメブロはYouTubeの埋め込みコードのコピペだけで大丈夫のようです。iPhoneでも綺麗に表示されていました。
なので、これから、もしくは現在ワードプレスを使ってる方はしっかりチェックしておいてくださいね。
余談ですが、上記YouTubeは久保田利伸の「Cymbals」です。もう何十年も久保田ファンの僕としては、この曲に癒されます(笑)さ~6月は2年ぶりにライブに行くぞ~頑張ろう!!
contact
コメントを残す