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

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

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

解決方法は二種類

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

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で高さを調整すること。この値を使うウェブのデザインによって変えて調整する。あとは、色であったりサイズも変更可能である。

スマホ対応にしているのはこちら。(もちろんまずは、viewpointの設定が必要)

.youtube::before {
line-height: 55vw;
}

この値を変更していけば、好みの位置に来ると思います。

ぜひチャレンジしてみてください!

https://www.notitle-weblog.com/entry/2016/05/21/155650

Web・インターネットカテゴリの最新記事