WordPress

WordPress★Youtubeをレスポンシブ対応にするには?

投稿日:2020年12月1日 更新日:

WordPress記事にYoutube動画を埋め込む

サイトに埋め込みたいYoutubeのページにアクセスします。

再生ページの動画プレイヤーの下に「共有」というリンクがあるので、これをクリックします。すると、共有するためのリンクが表示されるのでURLをコピーします。

右横の青い文字の「コピー」をクリックすると、クリップボードにURLがコピーされます。

記事内にYoutubeブロックを追加して、先程コピーしたURLを埋め込みます。

これで動画の埋め込みは完了です。
上記の手順が面倒な場合は、動画再生ページのURLをコピーして使ってもOK。

WordPressに埋め込んだYoutube動画をレスポンシブル対応にする

ブロックから埋め込んだYoutube動画はレスポンシブル対応になっているので、特に設定する必要はありません。

独自テーマなどを作るなどでコードを書いている場合は、単に埋め込んだだけではレスポンシブに対応されないため、次の手順でレスポンシブルに対応させます。レスポンシブル対応とは画面の横幅にあわせて動画のサイズも拡大縮小されてレイアウトを保てるようすることです。

Youtube動画のコードをdiv要素で囲みます。
<div class=”youtube”> </div>で囲みます。

あとは、CSSの定義をするだけです。

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

参照サイト:https://takayakondo.com/wordpress-youtube-responsive/

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:

関連記事

WordPress★強制的にCSSのキャッシュを無効化する方法

サイトを修正した後でクライアント様に確認していただくとき、 「ブラウザのキャッシュを削除してから、もう一度ご確認いただけますでしょうか」 というやりとりをよ〜くやります。 せっかく修正したのに「直って …

WordPress★コメント部分を簡易掲示板風にカスタマイズする

  WordPressのバージョンは4.7.3 コメント部分を掲示板風にカスタマイズ。変更内容は 1)コメントの入力フォームで不要な部分を非表示にする 2)入力フォームの文言を自由に変更する  3)コ …

WP★テーマ開発に便利!対応テンプレートファイルがすぐにわかるプラグイン

ブロックエディターについて調べているとき偶然に、現在閲覧中のページがどのテンプレートファイルに対応しているのかすぐにわかるプラグインがあることを発見。これってWordPressでテーマのカスタマイズや …

WordPress★ブロックエディター「Gutenberg」 投稿ページでテンプレートを使えるようにする方法

「TinyMCE テンプレート」は、ブロックエディター「Gutenberg」では使えないので、TinyMCE テンプレートの代替を探すことにした。 ブロックエディターで記事のひな形を使う方法を調べてい …

WordPress★ページごとに個別のCSSを読み込ませる方法★編集画面下にCSSを入力するエリアをつくる

WordPressはCSSを「style.css」に記述していくのが一般的な方法。 一つのファイルにまとめて書くとものすごい量になってしまうので、もっとスッキリさせたい! ページごとに読み込む方法はい …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。