正直、自分も結構忘れていたりします。なので、備忘録もかねて・・
WordPress(ワードプレス)の記事を作っていて、やらかす話です。
適当に、コピペで、Youtubeの動画を埋め込んだら・・・
そんなときに、WordPress(ワードプレス)のwebサイトだと発生します。
スマートフォンで見ると、
動画が、webサイトの幅をはみ出てしまって、
みっともない表示になっている
というケースです。
Youtubeだけ、はみ出ているので、
どう考えても、Youtubeの貼り付け方が悪かったな～と思うので、サクッと直そうと思うんですけどね。
ただ、意外と、ワードプレスでの直し方がわからない、という方もいらっしゃいます。
そこで、今回は、WordPress(ワードプレス)にCSSを追加して、これを解消させる方法を解説していきます。
Youtube動画を、いいかんじに、WordPress(ワードプレス)に反映させるなら、本当に、この方法が簡単なので、おすすめです。
Youtubeの動画を速攻レスポンシブ対応できる！簡単CSSサンプル
YOUTUBE動画をスマホでも、きれいに表現するために、、
おまじないのようなCSSですね。
WordPress(ワードプレス)にCSSを追加する方法は簡単です！！
- WordPressの管理画面にログイン
- 「外観」 メニュー から カスタマイズ をクリック
- 「追加CSS」をクリック
ここに 以下のCSSを追加してください。
これが、レスポンシブ対応をしてくれるCSSのサンプルです。
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です。
実際の記述例です。
このようにWordPress(ワードプレス)の記事に設置をしておけば
スマートフォンで、WordPress(ワードプレス)のサイトを見ても、
ページの幅を、Youtubeの動画が、超えてしまうことはないですね！！
実際に、以下に、こうしてWordPress(ワードプレス)に張り付けたサンプルの動画も記載しますね。
WordPress(ワードプレス)でも、こんなにきれいに、Youtubeの動画が、記事に埋め込めるんですよね！
WordPress(ワードプレス)で使える、便利なCSSのTIPS紹介でした。
【初心者向け】heroku(ヘロク)とは？ ヘロク で、できることを解説
■ youtube 動画 関連記事
【事例あり】YouTube カード 使い方 解説 動画マーケティング 効果 アップへ！
https://saras-wati.net/knowhow/about-youtube-card-jirei/
【YouTube ショートとは】動画の作り方 YouTube ショート 活用方法 メリットは？
https://saras-wati.net/knowhow/what-youtube-shorts/
【無料】youtube を 楽しくする 効果音 素材 無料サイト 厳選４サイト
https://saras-wati.net/knowhow/free-sound-effect-site/
【動画マーケティング】企業サイトPR Youtube 動画 活用 方法 まとめ
https://saras-wati.net/knowhow/youtube-video-pr/
【VSEOとは】youtube SEO、動画SEO 対策 絶対やっておくべき設定は？
https://saras-wati.net/seo/about-vseo/
動画分析！YouTubeアナリティクスを見る方法、ログイン方法
https://saras-wati.net/news/youtube-analytics1904/
簡単レポート YouTubeチャンネル＆動画の効果分析、数値指標は？
https://saras-wati.net/news/youtube-report1904/
【初心者必見】YouTubeチャンネル 動画で集客する方法と事例
https://saras-wati.net/news/youtube-howto-movie1904/
広報担当者必見。YouTubeチャンネルの開設メリットと事例
https://saras-wati.net/news/youtube-merit-1904/
【2018年YouTubeランキング】「米津玄師」「U.S.A」「本田翼」「キッズライン♡Kids Line」などをyoutubeで見た？
https://saras-wati.net/news/youtube2018-ranking-201901/
