Video auto play not working in Safari and Chrome desktop browser

html

video-tag

autoplay

responsive-design

byNikita Barsukov·Nov 5, 2024

<video autoplay muted playsinline>
  <source src="your-video.mp4" type="video/mp4">
</video>

To force auto-play in Safari and Chrome, combine autoplay with muted and playsinline attributes. Mute to avoid auto-play restrictions; playsinline ensures videos don't autoplay in fullscreen on mobile. Validate if src appropriately points to your video.

Taming browser autoplay quirks

Each browser has distinct operational rules, and managing autoplay for videos requires a knack for these specifics.

Understanding browser autoplay policies

Policies around autoplay strive to improve user experience. In Chrome, videos with sound won't autoplay, but adding a muted attribute in your video tag overcomes the autoplay restriction.

Essential Video Tag Attributes

To guarantee seamless video playback, include height, loop, controls along with autoplay and muted in your <video> tag:

<video autoplay muted loop controls height="720">
  <!-- multiple sources for wider compatibility -->
  <source src="your-video.webm" type="video/webm">
  <source src="your-video.mp4" type="video/mp4">
</video>

Minding your tags and scripts

Unclosed tags and bloated scripts could inhibit autoplay - tidy up your HTML and pare down your JS when you can.

Autoplay post-DOM manipulation

Remember, your video might refrain from autoplay, especially after dynamic DOM changes in Safari and Chrome. Attaching to the canplaythrough event might come in handy.

Keep jQuery out of this

If you've employed jQuery's .wrap() function around your video tag, bid it adieu - it could be thwarting your autoplay ambitions.

Thorough testing across scenarios

Ensure autoplay works consistently by testing across different pages and network conditions.

Performing autoplay with a twist of JavaScript

Manually kick-starting the video

Autoplay not launching as expected? You could manually start the playback using JavaScript:

document.addEventListener("DOMContentLoaded", function() {
  var myVideo = document.getElementById("myVideo");
  if (myVideo) {
    myVideo.muted = true; // Sorry audiophiles, videos need to quiet down for autoplay!
    myVideo.play();
  }
});

Review your video's boarding pass

Sometimes, the way your video is brought onto your page (or embedded) could cause playback issues. Pay close attention to your iframe or <video> setups.