YouTubeの埋め込みを軽くする方法

2020 / 03 / 042020 / 03 / 09

YouTube動画を多く埋め込むと20個を超えたあたりからページが重く遅くなってくる。

Contents

1. 解決方法は二種類

解決方法は二種類

画像を表示してリンクで飛ぶ→画像書き出しなど面倒
スクリプトを使う方法

1つ目は簡単なので今回は省く。

2つ目のスクリプトを使った表示方法

厳密には、YouTube動画リンクからサムネイルを一度書き出し表示→クリックされたらその動画を表示するというものになる。

CSSとHTMLに関しては、下記のリンクのものを参考にさせてもらった。これだけで十分なのだが問題は、サムネイルの上に乗る三角形→"▶︎"が気に入らない

なので、それを解決するCSSが下記である

.youtube {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%;
}

.youtube::before {
position: absolute;
content: “▶︎";
color: #fff;
text-align: center;
font-size: 35px;
font-weight: bold;
line-height: 280px;
background: rgba(0, 0, 0, 0.1);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
transition: all 0.3s;
}

.youtube:hover::before {
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
transition: all 0.3s;
}

ポイントは、contentを"▶︎"表示して、その位置をline-heightで高さを調整すること。この値を使うウェブのデザインによって変えて調整する。あとは、色であったりサイズも変更可能である。