YouTubeの埋め込みを軽くする方法
YouTube動画を多く埋め込むと20個を超えたあたりからページが重く遅くなってくる。
解決方法は二種類
- 画像を表示してリンクで飛ぶ→画像書き出しなど面倒
- スクリプトを使う方法
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;
}
この値を変更していけば、好みの位置に来ると思います。
ぜひチャレンジしてみてください!
ディスカッション
コメント一覧
まだ、コメントがありません