WordPress:youtube動画がスマホではみ出ない!レスポンシブで埋め込む方法

正直、自分も結構忘れていたりします。なので、備忘録もかねて・・

WordPress(ワードプレス)の記事を作っていて、やらかす話です。

適当に、コピペで、Youtubeの動画を埋め込んだら・・・

そんなときに、WordPress(ワードプレス)のwebサイトだと発生します。

スマートフォンで見ると、

動画が、webサイトの幅をはみ出てしまって、

みっともない表示になっている

というケースです。

Youtubeだけ、はみ出ているので、

どう考えても、Youtubeの貼り付け方が悪かったな~と思うので、サクッと直そうと思うんですけどね。

ただ、意外と、ワードプレスでの直し方がわからない、という方もいらっしゃいます。

そこで、今回は、WordPress(ワードプレス)にCSSを追加して、これを解消させる方法を解説していきます。

Youtube動画を、いいかんじに、WordPress(ワードプレス)に反映させるなら、本当に、この方法が簡単なので、おすすめです。

Youtubeの動画を速攻レスポンシブ対応できる!簡単CSSサンプル

YOUTUBE動画をスマホでも、きれいに表現するために、、

おまじないのようなCSSですね。

WordPress(ワードプレス)にCSSを追加する方法は簡単です!!

  1. WordPressの管理画面にログイン
  2. 「外観」 メニュー から カスタマイズ をクリック
  3. 「追加CSS」をクリック

ここに 以下のCSSを追加してください。

これが、レスポンシブ対応をしてくれるCSSのサンプルです。

.videowrap {
position: relative;
width: 100%;
padding-top: 60%;
}
.videowrap iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

上記のコードをコピペしたら、「公開」をクリックして保存

あとは、記事ごとに、動画をはりつけるときに、このように、

<div></div>で挟み込んで、youtubeのiframeタグを挟み込めばOKです。

実際の記述例です。

<div class=”videowrap”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/WKEblr4ZBAM” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
</div>

このようにWordPress(ワードプレス)の記事に設置をしておけば

スマートフォンで、WordPress(ワードプレス)のサイトを見ても、

ページの幅を、Youtubeの動画が、超えてしまうことはないですね!!

実際に、以下に、こうしてWordPress(ワードプレス)に張り付けたサンプルの動画も記載しますね。

WordPress(ワードプレス)でも、こんなにきれいに、Youtubeの動画が、記事に埋め込めるんですよね!

WordPress(ワードプレス)で使える、便利なCSSのTIPS紹介でした。

【初心者向け】heroku(ヘロク)とは? ヘロク で、できることを解説

【初心者向け】heroku(ヘロク)とは?メリット、できること、特徴を3分解説