videoタグで動画を表示させたWebサイトについてですが、パケット通信料や負荷に配慮してスマホ・タブレットの時は画像を表示させる場合、方法として、
単純にcssメディアクエリで、videoタグをdisplay: none;で非表示にし、親タグに背景画像を指定するというような方法で大丈夫なのでしょうか?
それとも、jQueryなどのプログラムで切り替えをする方法の方が良いのでしょうか?
html
1 <div class="cover-wrap"> 2 <video class="cover-video" autoplay muted loop poster=""> 3 <source src="http://xxxx.jp/video/xxx.mp4"> 4 </video> 5 </div>
css
1@media screen and (max-width: 768px) { 2.cover-wrap { 3 min-height: 400px; 4 background: url(../img/bg.jpg) 50% 0 no-repeat; 5 background-size: cover; 6} 7 8.cover-video { 9 display: none; 10} 11}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。