title: Replacing a background video with a background image when auto-play isn't allowed on device
body: <p>Have an auto-play background image and I'm trying to figure out how to replace it with an image on devices that don't allow auto-play. the <code>&lt;video&gt;</code> tag POSTER element seems to work alright, but it also seems on my iPhone, which does not allow auto-play of video, still downloads the video even though it's not used at all. Is there a better solution to this?</p>
  
  <p>(The autoplay detection post is part of the answer but my question is a tad different and I have marked an answer below.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="top-banner-vid" class="container-fluid px-0"&gt;
    &lt;div class="row no-gutters video-container"&gt;
      &lt;div class="col"&gt;
        &lt;video class="embed-responsive video-bg" poster="12-sunrise-picture.jpg" autoplay loop muted&gt;
          &lt;source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag. Please update your browser to enjoy the full features of this website. &lt;/video&gt;
        &lt;div class="container overlay-desc"&gt;
          &lt;h1&gt;Wayne's World&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>