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★グーグルマップを表示させる

2016年6月からグーグルマップを使う場合はAPIキーが必要になったとのこと。 評判のよいプラグイン「simple map」を使ってみたけど、 今回制作しているサイトでは動かなかったので、 i fra …

WP★管理画面の投稿一覧の表示数を増やすには?

管理画面の投稿一覧で投稿の並べ替えをするときに「もっと表示件数を増やせればいいのになぁ……」と思って調べてみました。とってもカンタン! 管理画面で投稿一覧の表示数を増やす方法 投稿一覧を開き、画面の右 …

ContactForm7のフォーム作成時に出るエラー「複数のフォームコントロールが単一の label 要素内に置かれている」を解消する

WordPressでは超有名なフォームプラグインの Contact Form 7。 新しくフォームを作成するにはコードを編集する必要があります。 コード編集といっても簡単で、初心者でもそんなに困ること …

WordPress★サイトをコピーしてテスト環境をつくる手順【プラグインなし】

今回は、 WordPressをそのままコピーしてテスト環境とする。 というのをやろうとして、サイトの複製にとりかかったのですが、 いつも使っている便利なプラグインを使うとエラーが出まくり、手動で作業し …

White Background Cubes Architecture  - icame / Pixabay

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

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

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