How can I replace an auto-play background image with a static image on devices that do not support auto-play? The <video> tag's POSTER attribute works, but it seems that on my iPhone (which does not allow auto-play), the video is still downloaded even though it is not used. Is there a more effective solution for this issue?
(The post about autoplay detection partially addresses this question, but my query is slightly different and I have provided a response below.)
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
display: block;
}
video {
display: block;
}
.video-container {
width: 100%;
max-height: 550px;
overflow: hidden;
position: static;
top: 0;
right: 0;
z-index: -100;
}
.overlay-desc {
background: rgba(0,0,0,0);
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
}<div id="top-banner-vid" class="container-fluid px-0">
<div class="row no-gutters video-container">
<div class="col">
<video class="embed-responsive video-bg" poster="12-sunrise-picture.jpg" autoplay loop muted>
<source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
Your browser does not support the video tag. Please update your browser to enjoy the full features of this website. </video>
<div class="container overlay-desc">
<h1>Wayne's World</h1>
</div>
</div>
</div>
</div>