YouTube動画埋め込み時にはみ出る現象を防ぐ方法

  1. カスタマイズ
Rui
Rui

Webコンテンツ&WordPressクリエイターのRuiです!

 

記事を執筆していると、文章や画像だけではどうしても伝わりきらない場合がありますよね。

そのようなときに動画を記事に載せておくと読者に伝わりやすく、またサイトの滞在時間も延びます。

それなのに、YouTubeの動画をブログに埋め込んだら、スマホで見るとはみ出ていて全部見られない!

  

動画を見てほしくて埋め込んだのに、見切れているせいで「ダサい」という印象を与えてしまったら、渾身の記事が台無し。

     

YouTubeの動画がはみ出る要因は、動画を共有、または右クリックして「埋め込みコードをコピー」した時に、動画のサイズが指定されてしまうから。

そのため、画面が縦に長いスマホで見ると画像がはみ出してしまうのです。

 

読者にはPCでもスマホでも綺麗なレイアウトで見てほしいじゃないですか?

そこで、簡単に画像のはみ出しを予防できる方法を紹介します。

    

「はみ出しを予防するって言っても、CSSをいじったりするんでしょ?そんなのできないよ!」

「WordPressを始めたばかりだから、そんなこと言われてもワケがわからない」

 

そんなあなたでも大丈夫。

設定は簡単にできますので、ぜひやってみてくださいね♪

iframeを使って画面からはみ出ない動画埋め込みをする

1.ダッシュボードから「外観」→「カスタマイズ」を選択

2.追加CSSをタップ

4.赤枠の部分に『iframe{width:100%;}』と入力後、「公開」をタップ

iframeの横幅を100%に設定することで、動画のはみ出しを予防できます。

    まとめ

Rui
Rui

最後まで読んでいただき、ありがとうございます。

YouTubeの埋め込み動画をはみ出さずに表示させる方法はいくつかありますが、この方法はすごく簡単。(※iframeはコードが重いので表示速度が落ちたら消してください)

WordPressでコードを1つ追加するだけです。

プログラミングなんてわからない!そんなあなたでもすぐに設定できますよ。

動画を埋め込むときは、ぜひこの設定をしてみてくださいね。

Rui

Webコンテンツ&WordPressマーケター
WordPressを用いた自社HPの制作、Webライティング、ウェブ解析と、制作から集客までをサポート。集客→育成→販売に労力を割くため、制作の手間や起こりうる不具合を極限まで減らし、無駄のない制作力を身につけて頂くことを最も得意とする。

記事一覧

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA