2023/01/02 (更新日: 2024/03/20)

高速Youtube埋め込みテスト

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

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

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

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

横スクロールの悪夢

が出ます。

そこで

youtubeWrapperを
YoutubeWrapper

にすると、

はい、ピッタリです。

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

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

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

あと、

JSコードをページ先頭に張り付ける

参考：
» 【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/yd8jh9QYfEs" 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% ;
}

クラス名は

• 1.外見
• 2.テーマファイルエディター
• 3.style css

から、追加または編集。

追加CSSのほうがトラブルは少ないです。

» この記事を読む

» この記事を読む

» この記事を読む

• facebook
• Tweet
• hatebu
• LINE
• Read Later