スモール起業ビルダー・ZONOのブログ

【YouTube/埋め込み】3分で分かる簡単説明【レスポンシブ対応】

MOVIE

ブログにYouTube動画を埋め込みたい人「ブログに、YouTubeの動画をそのまま埋め込んでいるサイトを見るけど、どうやってやるのかなぁ、、、。ブログ初心者にでも理解できるように簡単に教えてほしいです。」

こんにちは、ゾノです。

この記事を書いている僕は、現役でWebデザイナー&マーケターとして活動しつつ、ブログを運営しながら生活しています。今では、外出せずに学べるパソコン教室を運営し、ブログ初心者に特化したブログ指導活動にも取り組んでいます。

所要時間:3分です(最大でも10分)

本記事は、3分〜10分で、YouTubeの埋め込み方法を習得を目指す記事です。

事前知識

ブログ初心者「レスポンシブ対応って何ですか?」

ゾノ「画面の幅に合わせて、ピタッとなるように表示することです。現代では、パソコン、スマホ、タブレット端末があるので、それぞれの画面幅に合わせて表示させてあげる設定です。」

ブログ初心者「え、、、なんか既に挫折しそう、、、」

ゾノ「コピペで、実装できるように、ソースコードを下記に用意しているので、そのまま貼り付けるだけでオッケイです。あと、この作業はパソコンでやる作業です。スマホではできないので、パソコンでやりましょう😌」

本記事の内容

動画解説

文字情報がシンドければ、動画解説をどうぞ😌

【YouTube/埋め込み】3分で分かる簡単説明【レスポンシブ対応】

【YouTube/埋め込み】3分で分かる簡単説明【レスポンシブ対応】
YouTubeの動画をWordPress内に埋め込む方法は、下記4ステップです。

  • ステップ①:パソコンでYouTube動画を開く
  • ステップ②:「共有」>「埋め込む」をクリックする
  • ステップ③:動画の埋め込みのソースコードをコピー
  • ステップ④:WordPressのテキストにペースト

パソコンでYouTube動画を開く

パソコンでYouTube動画を開く

「共有」をクリックする

「共有」をクリックする

動画の埋め込みのソースコードをコピー

動画の埋め込みのソースコードをコピー

WordPressのテキストにペースト

WordPressのテキストにペースト

基本は、以上です。

レスポンシブ対応にする理由

画面の幅を変えると、こんな感じにはみ出ちゃうから。

レスポンシブ対応にする理由

理想はこんな感じです

これを解決するために、下記のソースコードを貼り付けます
これを解決するために、下記のソースコードを貼り付けます

レスポンシブ対応にするソースコード

手順は、2ステップです。

手順①:「外観」>「カスタマイズ」>「追加CSS」に下記のソースコードを追加します。

.youtubeWrapper{
	position: relative ;
	margin-top: 1.2em ;
	margin-bottom: 1.2em ;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
}

.youtubeWrapper iframe {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ;
}

手順②:YouTubeの埋め込みコードを少し変える

下記がソースコードなのですが、変わったのは「<div class="youtubeWrapper”>〜</div>」の間に、ソースコードを挟んだだけです。

<div class="YoutubeWrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/FQHHA4SSXtg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

これでオッケイです。
完成です。

表示速度も気にしたい、、、という意識の高い人は下記も実装しましょう。

【高速化】YouTube動画を埋め込みしても、表示速度を遅くしない方法

【高速化】YouTube動画を埋め込みしても、表示速度を遅くしない方法
YouTube動画の読み込み速度を高速化するために、本記事で紹介する仕組むは下記のとおりです。

YouTube動画の読み込み速度を高速化するための参考記事
» (参考)画像引用記事:<script> タグに async / defer を付けた場合のタイミング

簡単に言えば、HTMLを読み込むときの遅延処理です。
細かい部分ですが、やっておくといいのかな、、と個人的には考えています。

では、やり方を解説します。
ステップは2つだけです。

  • 投稿 or 固定ページごとの1番上に、ソースコードをコピペする
  • YouTube埋め込みのソースコードを、若干変更する

投稿 or 固定ページごとの1番上に、ソースコードをコピペする

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

これを各ページ上部に貼ります。

YouTube埋め込みのソースコードを、若干変更する

// 変更前
<iframe width="420" height="315" src="//www.youtube.com/embed/FQHHA4SSXtg" frameborder="0" allowfullscreen></iframe>

// 変更後
<iframe width="420" height="315" src="" data-src="//www.youtube.com/embed/FQHHA4SSXtg" frameborder="0" allowfullscreen></iframe>

変更点

  • src=“” → 空にする
  • data-src=“リンク” → ここにリンクを入れる

以上です。

参考になると思う記事

YouTubeチャンネルのヘッダー画像を作りたい人向けに、下記記事にて解説しています。他のSNSと比べても、サイズ感がややこしいので注意です。

YouTubeチャンネルのトップページを、キレイに再生リストごとにまとめたい人は、下記記事が参考になります。

最後までお読みいただき、ありがとうございます。下記のおしらせコーナーも、是非チェックしてくださると喜びます🙇‍
当ブログで無料配布している「ブログの書き方テンプレート」は受け取っておりますか?無料で資料請求できますので、この機会にぜひどうぞ💁‍♂️

今から始める!『稼ぐためのブログ勉強会』を開催しています

朝5時〜/昼1時〜/夜9時〜の時間帯で「ブログ運営の基礎」が無料で学べます。「Zoom」を利用して開催しますので、ご自宅からご参加可能です😌

  • 9月18日㈮ 5:00〜7:00【満員御礼】
  • 9月19日㈯ 21:00〜23:00【満員御礼】
  • 9月23日㈬ 13:00〜15:00【残り3名】
  • 10月21日㈬ 13:00〜15:00【残り5名】
  • 10月23日㈮ 5:00〜7:00【残り5名】
  • 10月24日㈯ 21:00〜23:00【残り5名】
» 今すぐ『稼ぐためのブログ勉強会』に予約する

参加者限定の特典があります

参加特典は「60分の個別相談」や「980円で販売しているブログ企画室に無料ご招待」なので、お得感満載で結構学べると思います。

嬉しいお声をいただいております

5時起床。今日は朝からオンラインでホームページ作りの勉強会でした。サイト構築にHTMLやCSSの基礎理解は必須。仕組みに慣れればそんなに難しくないです。固定費はサーバー代とドメイン代ぐらいでそんなにお金もかかりません。無料で有益でここまで高品質な勉強会って中々ないんじゃないかな🙇‍
» 今すぐ『稼ぐためのブログ勉強会』に予約する

お知らせ:厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク(テレビ会議システム)の導入をご検討の方は、ぜひどうぞ🙇‍

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】30分の無料相談会&体験レッスン(オンライン開催)に初回限定で参加できることです。

どうしても分からなかったり、1人で悩むことがあればご相談ください。

その他、ご相談&ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

当ブログで無料配布している「ブログの書き方テンプレート」は受け取っておりますか?無料で資料請求できますので、この機会にぜひどうぞ💁‍♂️

僕は、こんな人です

ゾノ@スモール起業ビルダー
当ブログの筆者。日本一わかりやすいブログ教師/高校教師の職を捨て起業失敗→在宅リモートワークで月収7桁達成→V字回復。10代から不登校や非行で根っからの引きこもり人間。現在はオンライン講座『外出せずに学べるパソコン教室』を運営し生徒は累計230名。個人がマイペースに生きるコツを発信しています。朝大好きです→ #01blog朝活の会
» プロフィール詳細はこちら

チップをいただけると、心から喜びます


人気記事【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

人気記事【持ち物公開】場所を問わないノマドワーカーのバックパックLIFE