初心者の私には、ブログを運営する時に、克服すべき課題が都度あらわれます。
初心者の私でも簡単にできて解決した知恵を分かち合いたいと思います。
Youtubeが、スマホ上ではみ出してしまう問題を解決！
解決方法: 2ステップだけ
「１」追加CSSに次のコードを追加
iframe {
max-width:100%;
max-widthという言葉によって、「要素の幅」を「これ以上大きくさせない」、という命令になる模様です。
詳しい解説
「max-width」によって、これ以上の要素幅を大きくさせない命令になるようです。
追加CSSはどこ？
ワードプレス上のカスタマイズ
🔽
追加CSSに
🔽
この画像の一番下のように簡単に書き込むだけ！
「２」 Youtubeの埋め込みコードの前後に次のように打ち込む
次に、記事の中で、動画を入力したいところに、次のコードを入れます。（HTMLカスタムで）
<div class=”youtube”>埋め込みデータ</div>
Youtubeの埋め込みコード欄のデータをコピー
埋め込みの長いデータを、上述したコードを前後で挟むだけ
<div class=”youtube”>ながーーーーーーーい埋め込みデータ</div>
おまけ：ブログの中央に広告や動画をのせる
私はいつも、広告や動画が中央に来るように以下のコードを使っています。
<div align=”center”>各種（広告）コード</div>
これを入れ込むことで、中央に動画や広告がが見えるようになります。
ここからは何故、このような作業が必要になったかの経緯と、参考になった今回の救世主を紹介します。
動画を限定公開で使いたい
私はドイツの暮らしのYoutubeチャンネルを運営しています。
チャンネル上では、ある程度の長さのある美しいクオリティの高いものだけをのせています。
このブログでは時々お店や風景を紹介するために、「限定公開映像」として使いたいと思いました。
限定公開動画は、いつも使っているYoutubeのカテゴリでうまく表示されない。
いつもYoutubeは、この画像にあるYoutubeカテゴリを使っていますが、ここからは使えないようです。
Youtubeの埋め込みコードを使う
埋め込みコードを使うと、ネット上は問題なく映し出されました。
しかし、スマホの動画の幅を変える必要性が生じたのです。
今回の救世主
色々とネットサーフィンして、試してみましたが、どれも効果が出なくて焦っていました。
そしたら、すごく簡潔で一発で効果の出るこのサイトの情報に出会いました。
👉【WordPress】THE THORで地図やYoutubeがはみ出てしまう問題を簡単に解決！
どの情報もうまくいかなかった。
でも、この情報は本当に効きました。
ありがたいです。
初心者でも使いこなせる「トール」【THE THOR】
トールは、最初に少し覚えるのに時間がかかるものの、初心者でも十分に使いこなせます。SEO対策に向いているのと、デザインが好きなように、そして綺麗にカスタマイズできます。
ぜひ、初心者さんも使ってみてください。