title: HTML5 video doesn't autoplay (even while muted) in Chrome 67 using Angular
body: <p>I know several posts have similar issues, but none of the ones I have looked at have the specific issue I'm experiencing.</p>
  
  <p>The problem is, I have a HTML5 video which won't autoplay, even though it is muted. Specifically, it doesn't work in Chrome. It works completely fine in Safari and Firefox.</p>
  
  <p>The code snippet looks as such:</p>
  
  <pre><code>&lt;video class="landing-page-video" poster="assets/images/video-poster.jpg" loop muted playsinline preload="metadata" disableRemotePlayback&gt;
      &lt;source src="assets/images/landing-page-video-2.mp4" type="video/mp4"&gt;
      Your browser does not support video.
  &lt;/video&gt;
  </code></pre>
  
  <p>The code snippet is from this <a href="https://student-talks.com" rel="nofollow noreferrer">website</a> and it is built with Angular. I've removed attributes that are only related to Angular in the copied snippet for clarity.</p>
  
  <p>I have tried several combinations of what is suggested various places online, as well as carefully reading the documentation for the newer versions of Chrome that affect the autoplay feature. I am, however, at a loss, with nothing seeming to work.</p>
  
  <p>Supposedly, the policy change should only affect autoplay for videos with audio, but it still seems to block autoplay for this muted video.</p>
  
  <p>One weird behavior that I have noticed is, that sometimes the video will start playing if I open the chrome inspector tool and close it again. Not always, though.</p>
  
  <p>I also tried triggering the <code>play()</code> directly through JavaScript, but this of course won't work since the user didn't initiate it through a click.</p>
  
  <p>Could this be a bug with Chrome or is it on my end? Any help is appreciated!</p>
  
  <hr>
  
  <p><strong>EDIT: Still not working. I have tried the following, with no result:</strong></p>
  
  <ul>
  <li>Using the <code>http://techslides.com/demos/sample-videos/small.mp4</code> video as source instead.</li>
  <li>Adding <code>autoplay</code> attribute.</li>
  <li>Replacing the whole <code>&lt;video&gt;</code> element with the one from the suggested <a href="https://jsfiddle.net/gababa/2cz6f53k/" rel="nofollow noreferrer">jsfiddle</a>.</li>
  </ul>
  
  <p>When I enable <code>controls</code>, the audio button shows as grayed out "sound on" version, might be due to my video having no audiotrack. However, when using the demo video, it still shows the audio button with "sound on" in spite of the <code>muted</code> attribute being set.</p>
  
  <hr>
  
  <p><strong>EDIT 2: Added code for the Angular component which contains the video element:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;video class="landing-page-video noselect"  poster="assets/images/video-poster.jpg" *showItSizes="{min:900}" muted loop autoplay disableRemotePlayback&gt;
      &lt;source src="assets/images/landing-page-video-2.mp4" type="video/mp4"&gt;
      Your browser does not support video.
  &lt;/video&gt;
  
  &lt;div class="landing-page-video-overlay noselect" *showItSizes="{min:900}" [ngStyle]="{'height': videoHeight + 'px'}"&gt;
      &lt;st-svg-logo class="video-overlay-logo"&gt;&lt;/st-svg-logo&gt;
  &lt;/div&gt;
  &lt;div class="noselect" *showItSizes="{max:899}" style="position: relative; top: 0; height: 100vh;"&gt;
      &lt;img src="assets/images/landing_pic_mobile_3.jpg" alt="Student Talks in Space" class="landing-page-video"
           style="height: 100vh;"&gt;
      &lt;img class="video-overlay-logo" src="assets/images/student-talks-header.png"/&gt;
      &lt;img src="assets/images/landing_pic_mobile_bottom.png" class="bottom-transition-glitch" alt=""&gt;
  &lt;/div&gt;
  
  
  &lt;div class="st-container"&gt;
      &lt;st-events-list class="full-width event-list" *showItSizes="{max:899}"&gt;&lt;/st-events-list&gt;
      &lt;h1&gt;HOW IT WORKS&lt;/h1&gt;
      &lt;st-what-is class="st-row"&gt;&lt;/st-what-is&gt;
      &lt;st-world-map class="full-width" *showItSizes="{min:899}"&gt;&lt;/st-world-map&gt;
      &lt;st-counters #counters class="full-width" stInView (cameInView)="counters.countUp()"&gt;&lt;/st-counters&gt;
      &lt;st-events-list class="full-width" *showItSizes="{min:900}"&gt;&lt;/st-events-list&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;st-video class="st-row"&gt;&lt;/st-video&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;st-partners&gt;&lt;/st-partners&gt;
      &lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.landing-page-video, .landing-page-video-overlay {
    position: relative;
    width: 100vw;
    max-width:100%;
    top: 0;
    z-index: -100;
  }
  
  .landing-page-video-overlay {
    height: 56.25vw;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  
  @media screen and (max-width: 899px) {
    .video-overlay-logo {
      position: absolute;
      top: 50vh;
      right: 21%;
      width: 100vw;
      animation: fade-in 1s;
      z-index: 160;
    }
  
  }
  </code></pre>
  
  <p>TypeScript:</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  
  @Component({
    selector: 'st-home',
    templateUrl: './home-page.component.html',
    styleUrls: ['./home-page.component.css']
  })
  export class HomePageComponent implements OnInit {
    constructor() {}
    ngOnInit() {}
  }
  </code></pre>