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

Pocket

embedresponsively

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

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

「あ~面白そうだな~」

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

「見れへんやん(怒)」

 

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

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

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

 

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

 

簡単なYouTube埋め込み記事の表示崩れ防止方法

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

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

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

 

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

embedresponsivelyサイト

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

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

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

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

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

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

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

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

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

 

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

 

 

contact

お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文

 

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です