GutenbergでYouTube動画をレスポンシブ対応する方法

WordPress

WordPressのエディタが「Gutenberg」の場合、記事を書いていてYouTubeの動画を埋め込みしたい時、レスポンシブ対応にしておく方法を忘却録として記事として書き留めておきます。

まずは埋め込みたい箇所にブロックを追加

まずは埋め込みたい所で「+」をクリックしてブロックを追加をしていきます

そこで埋め込みのセクションから「YouTube」(赤いロゴなのですぐに分かりますよね)をクリックします。

埋め込みたい動画のURLを入力

ブロックが追加されると、画像のようなウィンドウが表示されるので、URL入力欄に埋め込みたい動画のURLを貼り付けます。

スタイルシートを追加

埋め込む動画の前後に「.wp-block-embed__wrapper」というスタイルシートが追加されます。

なので、下記のcssを「外観」→「カスタマイズ」→「追加css」に追加します。

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

以上で、レスポンシブ対応が完了です。

とても簡単ですので、もしYouTube動画のレスポンシブに困っているかたはやってみてください。

sanpo-zukan

sanpo-zukan

ストアカで『【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室( https://www.street-academy.com/myclass/78668 )』運営中!

関連記事

特集記事

コメント

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

CAPTCHA


sanpo-zukan

sanpo-zukan

当サイト(さんぽずかん)を運営しています「しゃむ」です。 役立つ情報からしょうもないネタまで、少しでも読んだ人の役に立てばいいなと思って、いろいろな記事を掲載していきます!

最近の記事

  1. 唐辛子買ってきた。 #唐辛子|インスタからの投稿

  2. WordPress管理画面の投稿一覧で「タグ」の絞り込み表示をできるようにする方法

  3. スマホアプリのGoogleマップでダークモード使う方法

  4. PR

    【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室

新着 オススメ 特集記事
  1. 唐辛子買ってきた。 #唐辛子|インスタからの投稿

  2. WordPress管理画面の投稿一覧で「タグ」の絞り込み表示をできるようにする方法

  3. スマホアプリのGoogleマップでダークモード使う方法

  1. Flexboxでjustify-content: space-betweenの最後の要素を左寄せにする方法

  2. しまった!アップグレードしたらサイトの表示が崩れた!!WordPressをダウングレードするカンタンな方法とは?

  3. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  1. GoogleAdsenseで口座確認のデポジットがなかなか入金されなかったとき確認すべき点

  2. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  3. ネコ好きLINEユーザー必見!懲りずに第二弾はスタンプ8個でお手軽LINEスタンプ!「ゆるかわミケにゃん」販売開始!

TOP