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

執筆者:

関連記事

White Background Cubes Architecture  - icame / Pixabay

WordPress★自由にファイル名を決められるカスタムテンプレートでパーツ化する

カスタムテンプレートは自由なファイル名でパーツ化することができる テーマを自作していると、細かくモジュール(パーツ)を作りたいことがあります。カスタムテンプレートを利用すると、自由にファイル名を付けて …

WordPress★アイキャッチ画像を自動で設定してくれるプラグイン

  WordPressで記事の投稿時に、自動でアイキャッチ画像の設定をしてくれるプラグインといえば「Auto Post Thumbnail」が有名ですが、最近はなぜかうまく動作してくれず使用 …

WP★flamingoでダウンロードしたCSVを文字化けさせずにExcelで開く方法

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

WordPress★FaceBookページをサイトに埋め込む【2020年版】

facebook for developers ページプラグインはコチラ ページに遷移すると、下のような画面になります。 「FaceBookぺージのURL」の箇所に、埋め込みたいページのURLを貼り付 …

WordPress★ホバーでポップアップを出す

画像にホバーしたときに解説のポップアップを出して欲しいとのリクエスト。 いろいろやり方を探していたら、CSSだけで実装できそうなので試してみた。 animation プロパティと @keyframes …

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