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★flamingoでダウンロードしたCSVを文字化けさせずにExcelで開く方法

flamingoからダウンロードしたCSVファイルは、文字コードがutf-8なので、エクセルで開くと100%文字化けします。Windowsのメモ帳で文字コードを変更して上書き保存すればOKなのですが、 …

WordPress★特定のページだけに「ある要素」を表示させたいとき

WordPressで、特定のページだけに「ある要素」を表示させたいときの テンプレートファイルへの書き方。 テンプレートファイル内の要素を表示させたい箇所に記述 要素のボリュームが少ない場合 =>テン …

WordPress4.7.3★子テーマの作り方(Twenty Seventeen の場合)

  子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。  子 …

Lens Camera Photography  - rotation360 / Pixabay

WordPress★「Pixabay images」に変わるプラグイン

WordPressを最新版にアップデートしたら、プラグイン「Pixabay images」がブロックエディターに対応していない。そこで、代わりになるプラグインを探してみた。 googleで検索すると、 …

WordPress|twenty seventeen カスタマイズ|フッターの「Proudly powered by WordPress」を変更したい!

デフォルトで表示されている「Proudly powered by WordPress」を変更するファイルはテーマフッター「footer.php」ではありません。 「themes/twentyseven …

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