Automatically play video on Mac
<p>I've the following code in my webpage (Python/Django framework) to enable a video to play in the background.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="video-container"&gt;
    &lt;div class="video-container-bg"&gt;
        &lt;video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid"&gt;
                &lt;source src="{{page.video.url}}" type="video/mp4"&gt;
                &lt;source src="{{page.mac_video.url}}" type="video/webm"&gt;
        &lt;/video&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-sm-12 col-md-8"&gt;
                    &lt;div class="animation-element bounce-up"&gt;
                        &lt;h1 class="page-title"&gt;{{page.page_title}}&lt;/h1&gt;
                        &lt;p class="strapeline"&gt;{{page.strapline}}&lt;/p&gt;
                        &lt;a class="butt" href="#about-us"&gt;Learn More&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>video#bgvid { 
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height:100%;
    overflow: hidden !important;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url() no-repeat;
    background-size: 100%;

}

.video-container {
    min-height: calc(100vh - 75px);
     overflow: hidden !important;
     position: relative;
}
.video-container-bg {
    padding-top: 25vh;
    color: #fff;
}
</code></pre>

<p>It works fine on everything except Safari where nothing plays.  Why not? Is it something Apple have set to prevent?  In fact, when I run Safari on Windows it's telling me it cannot play HTML5 video.  Is that right?</p>

<p>I've solved this by saving the mp4 files in a lossless state.  It now seems to work.  I have no idea why</p>

python css django osx html5-video