2023/01/02 (更新日: 2026/03/06)

高速Youtube埋め込みテスト

この記事にはプロモーションが含まれています

参考記事【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】

まず、Youtubeのiframeを遅延読み込みするJavaScriptを冒頭に記載します。

ソースコード

<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>

サイト通りにコードを打つとこうなる。

参考：マナブ

なんか、こじんまりとしてますね。まぁ確かに高速になります。
さらに、ここではあえてこのままにしていますが、manablog copyではスマホのレスポンシブ対応できなくなり、Webデザイナーの悩みのタネである

横スクロールの悪夢

が出ます。

そこで

youtubeWrapperを
YoutubeWrapper

にすると、

参考：マナブ

はい、ピッタリです。

違いはテーマのCSSです。manablogのように

特にmanablogコピーを使っている

場合は、するには"youtubeWrapper"をYoutubeWrapperに、Yを大文字変えるだけでできます。

実際に"Y"になってます。

あと、

Defer(遅延読み込み)用のJavaScriptを冒頭に貼る

参考：マナブ

» 参考：【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】

まずページの先頭に

<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のコードをコピペします。

<div class="YoutubeWrapper"><iframe  width="420" height="315" src="" data-src="//www.youtube.com/embed/J5igUPEg-v4" frameborder="0" allowfullscreen></iframe></div>

まずこれをそのままコピペします。そして、

/watch？v=Dlc9Rd＿Z4UY

v=の後が動画のID、識別の名札なのでembed/の後にコピペします、というかこれだけです。
できれば自分で撮影した動画がベストかな。

以上で完了\^o^/
なんて簡単\^o^/\^o^/\^o^/

念のためにYoutubeの横幅を100%にする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% ;
}

クラス名は