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

執筆者:

関連記事

WP★User Role EditerでFlamingoを編集者権限でも使えるようにする

  プラグイン「User Role Editer」を使うと権限の設定ができるので、クライアント向けの管理者を編集者権限でログインできるようにして使うことが多いのですが、「Contact Fo …

no image

絶対に導入しておきたいWordPressプラグイン10+3選

絶対に導入しておきたいWordPressプラグイン10+3選   WordPress サイトの集客に必須のプラグイン 【1】「All in One SEO Pack」 【2】「WP Soci …

WP★フロントページの背景色を変更する★Twenty Seventeenをカスタマイズ04

フロントページの背景色をパネルごとに変更する方法 フロントページを複数指定している場合、設定した固定ページを順番に表示させています。 このとき 各セクションごとに背景色を変更する方法です。 CSSを追 …

WordPrss★テンプレートを投稿記事ごとに替える

テンプレートを投稿記事ごとに替える 固定ページは、phpファイルを作っておけばテンプレートとして選べるようになるけれど、投稿ページで、テンプレートを作るにはどうしたらいいのだろう。。。 WordPre …

WordPress|メタ情報のいらない項目を非表示にする

サイドバーウィジェットにある「メタ情報」は全体を表示させるか非表示にするかの2択しかない。必要な項目だけ表示させたいのでその方法を調べてみた。 メタ情報のデータファイル メタ情報の表示データは、wp- …

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