HTML5 + CSS 3 - How to autoplay videos silently?

Question

How can I create a div that contains an autoplay video silently like this site? Can I achieve that with HTML5 and CSS3?

I inspect that and I get this bunch of code that I don't understand:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="517.135px" height="136.187px" viewBox="0 0 517.135 136.187" enable-background="new 0 0 517.135 136.187" xml:space="preserve"><g><path d="M85.767,53.439V0h29.971c5.827,0,10.39,4.226,10.39,9.617v14.497c0,5.39-4.563,9.615-10.39,9.615H98v19.71H85.767z      M112.574,22.933c0.779,0,1.322-0.428,1.322-0.814V11.611c0-0.386-0.543-0.815-1.322-0.815H98v12.137H112.574z"></path><path d="M161.521,53.439l-4.105-11.119h-17.939l-3.934,11.119h-12.525L143.144,0h10.767l20.125,53.439H161.521z M153.605,31.753     l-5.12-15.152l-5.122,15.152H153.605z"></path><path d="M210.693,53.439l-10.771-19.71h-9.253v19.71h-12.233V0h30.825c5.828,0,10.392,4.226,10.392,9.617v14.497     c0,4.004-2.608,7.512-6.494,8.95l11.186,20.375H210.693z M206.098,22.933c0.78,0,1.323-0.428,1.323-0.814V11.611     c0-0.386-0.543-0.815-1.323-0.815h-15.429v12.137H206.098z"></path><path d="M266.348,53.439l-4.104-11.119h-17.942l-3.931,11.119h-12.529L247.973,0h10.766l20.127,53.439H266.348z M258.434,31.753     l-5.123-15.152l-5.119,15.152H258.434z"></path><path d="M293.757,53.439c-5.782,0-10.311-4.224-10.311-9.618V9.617c0-5.392,4.528-9.617,10.311-9.617h19.233     c5.829,0,10.396,4.226,10.396,9.617v8.329l-12.238,1.828v-8.163c0-0.386-0.539-0.815-1.319-0.815h-12.825     c-0.776,0-1.322,0.43-1.322,0.815v30.218c0,0.385,0.546,0.814,1.322,0.814h12.825c0.78,0,1.319-0.43,1.319-0.814v-8.623     l12.238,1.828v8.787c0,5.395-4.566,9.618-10.396,9.618H293.757z"></path><polygon points="362.97,53.439 362.97,31.581 345.615,31.581 345.615,53.439 333.38,53.439 333.38,0 345.615,0 345.615,20.784      362.97,20.784 362.97,0 375.199,0 375.199,53.439   "></polygon><path d="M395.931,53.439c-5.78,0-10.305-4.224-10.305-9.618V0h12.232v41.829c0,0.385,0.544,0.814,1.32,0.814h12.827     c0.778,0,1.32-0.43,1.32-0.814V0h12.233v43.821c0,5.395-4.567,9.618-10.39,9.618H395.931z"></path><polygon points="446.762,53.439 446.762,10.796 431.284,10.796 431.284,0 474.471,0 474.471,10.796 458.995,10.796      458.995,53.439   "></polygon><polygon points="480.62,53.439 480.62,0 517.135,0 517.135,10.796 492.85,10.796 492.85,21.093 514.998,21.093 514.998,31.888      492.85,31.888 492.85,42.644 517.135,42.644 517.135,53.439   "></polygon></g><g><polygon points="127.535,125.525 127.535,96.896 117.776,116.474 107.678,116.474 97.917,96.896 97.917,125.525 85.767,125.525      85.767,70.399 97.517,70.399 112.726,101.673 127.938,70.399 139.686,70.399 139.686,125.525   "></polygon><path d="M160.53,125.525c-5.938,0-10.592-4.334-10.592-9.863V80.259c0-5.529,4.653-9.859,10.592-9.859h20.794     c5.988,0,10.678,4.33,10.678,9.859v35.403c0,5.529-4.69,9.863-10.678,9.863H160.53z M163.892,81.387     c-0.865,0-1.447,0.486-1.447,0.938v31.274c0,0.451,0.583,0.938,1.447,0.938h14.159c0.865,0,1.446-0.486,1.446-0.938V82.325     c0-0.452-0.582-0.938-1.446-0.938H163.892z"></path><polygon points="236.782,125.525 215.885,93.46 215.885,125.525 203.733,125.525 203.733,70.399 215.404,70.399 236.301,102.603      236.301,70.399 248.451,70.399 248.451,125.525   "></polygon><polygon points="273.922,125.525 273.922,81.387 257.902,81.387 257.902,70.399 302.445,70.399 302.445,81.387 286.43,81.387      286.43,125.525   "></polygon><path d="M346.044,125.525l-11.149-20.402h-9.698v20.402h-12.504V70.399h31.829c5.885,0,10.674,4.423,10.674,9.859v15.002     c0,4.139-2.716,7.76-6.766,9.213l11.552,21.051H346.044z M341.247,94.132c0.861,0,1.446-0.48,1.446-0.936V82.325     c0-0.452-0.585-0.938-1.446-0.938h-16.051v12.746H341.247z"></path><path d="M459.04,125.525l-4.245-11.512h-18.673l-4.074,11.512h-12.79l20.76-55.125h11.042l20.764,55.125H459.04z M450.914,103.261     l-5.418-16.023l-5.419,16.023H450.914z"></path><polygon points="480.62,125.525 480.62,70.399 493.126,70.399 493.126,114.537 517.197,114.537 517.197,125.525   "></polygon><g><polygon points="371.601,125.525 371.601,70.399 409.236,70.399 409.236,81.387 384.106,81.387 384.106,92.23 407.024,92.23       407.024,103.216 384.106,103.216 384.106,114.537 409.236,114.537 409.236,125.525    "></polygon><rect x="381.077" y="63.598" width="18.682" height="2.818"></rect></g></g><g><path d="M31.597,65.801L2.566,44.852l-2.539-5.215L0,0h11.048l24.296,17.6L59.647,0h11.05l-0.029,39.637l-2.54,5.215     L39.095,65.801H31.597z M38.177,62.951l27.704-19.99l1.938-3.98L67.845,2.85h-7.272L36.049,20.605h-1.407L10.127,2.85H2.851     L2.874,38.98l1.938,3.98l27.705,19.99H38.177z"></path><polygon points="36.974,23.454 61.495,5.699 64.994,5.699 64.972,38.323 63.636,41.069 37.254,60.104 33.436,60.104 7.062,41.069      5.724,38.323 5.702,5.699 9.202,5.699 33.718,23.454   "></polygon></g><g><path d="M31.597,136.187L2.566,115.238l-2.539-5.213L0,70.387h11.048l24.296,17.597l24.303-17.597h11.05l-0.029,39.638     l-2.54,5.213l-29.034,20.949H31.597z M38.177,133.337l27.704-19.988l1.938-3.984l0.025-36.13h-7.272L36.049,90.994h-1.407     L10.127,73.234H2.851l0.023,36.13l1.938,3.984l27.705,19.988H38.177z"></path><polygon points="36.974,93.841 61.495,76.085 64.994,76.085 64.972,108.707 63.636,111.453 37.254,130.49 33.436,130.49      7.062,111.453 5.724,108.707 5.702,76.085 9.202,76.085 33.718,93.841   "></polygon></g></svg>

Do I have to convert and host the video elsewhere first?

I tried with HTML5 video tag but it does not work at all:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Autoplay</title>

</head>
<body>

    <video width="640"  height="360" src="https://www.youtube.com/watch?v=e3Nl_TCQXuw" autoplay muted>
        <p> Try this page in a modern browser! Or you can <a  href="https://www.youtube.com/watch?v=e3Nl_TCQXuw">download the  video</a> instead.</p>
    </video>

</body>
</html>

Any ideas?

Question is, why the `muted` attribute didn't work... strange. maybe because the source is `youtube`. maybe it's related to [this](http://stackoverflow.com/q/5157377/104380) — vsync, Feb 05 '17 at 11:18
@vsync `muted` works (see my answer), the problem is the video source, which is not a video file/stream, it's a youtube page with the video embedded. — Asons, Feb 05 '17 at 17:22
Possible duplicate of [How do I automatically play a Youtube video (IFrame API) muted?](http://stackoverflow.com/questions/8869372/how-do-i-automatically-play-a-youtube-video-iframe-api-muted) — TylerH, Feb 05 '17 at 19:59
After reading you comments I think this post will give you way how to move forward: http://stackoverflow.com/questions/10773322/event-when-youtube-video-finished — Asons, Feb 11 '17 at 13:14

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

<!DOCTYPE html>
<html>

<body>

  <video width="560" height="315" preload="auto" autoplay muted>
    <source src="insert you video url here" type="video">
  </video>

  <p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>

</html>

for more info about video tag attributes Click Here

if you want to source youtube video on video tag than refer this question

edited May 23 '17 at 12:08

Community

1
1

answered Feb 05 '17 at 11:45

Chirag Gojaria

55
1
10

thanks but it still does not work. html5 video source requires .mp4, .ogv and .webm paths i think... – Run Feb 05 '17 at 12:38

score 1 · Answer 2 · edited May 23 '17 at 11:45

To autoplay video you could use embeded iframe provided by YouTube and that would be fairly simple:

<iframe width="640" height="360" src="https://www.youtube.com/embed/e3Nl_TCQXuw?autoplay=1" frameborder="0" allowfullscreen></iframe>

You can find more information on parameters you can pass to iframe here.

But, to autoplay video silently you will need to use JavaScript. Here is the example of similar to your question:

YouTube: How to present embed video with sound muted

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 Autoplay</title>
</head>
<body>
  <div id="muteYouTubeVideoPlayer"></div>
  <script async src="https://www.youtube.com/iframe_api"></script>
  <script>
    function onYouTubeIframeAPIReady() {
      var player;
      player = new YT.Player('muteYouTubeVideoPlayer', {
        videoId: 'e3Nl_TCQXuw', // YouTube Video ID
        width: 640,               // Player width (in px)
        height: 360,              // Player height (in px)
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 1,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 1,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 3,  // Hide the Video Annotations
          autohide: 0         // Hide video controls when playing
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
      });
    }
  </script>
</body>
</html>

thanks but that is only for a single youtube only. i need to mute and play silently multiple videos. — Run, Feb 06 '17 at 06:24
You didn't mention that detail in your question. Do you want to autoplay multiple videos silently simultaneously? That sounds like a ruined UX indeed. In any case, if you don't host these multiple videos on your side and want to embed them from other video hosting platforms - the code for every video will vary. — Alex Ljamin, Feb 06 '17 at 11:36

score 0 · Answer 3 · answered Feb 05 '17 at 13:01

0

Can I achieve that with HTML5 and CSS3?

Yes, you can, though the link https://www.youtube.com/watch?v=e3Nl_TCQXuw does not return a video, it return youtube's page with that video loaded, so you need to access it in another way, or download it as a video and host it elsewhere.

Here is a sample showing the code work when the source is a valid video.

<video autoplay muted preload="none"
       src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"
       style="width: 500px;">
</video>

I inspect that and I get this bunch of code that I don't understand:

The <svg xmlns="http://www.w3.org/2000/svg" ...</svg> tag is a Scalable Vector Graphics.

answered Feb 05 '17 at 13:01

Asons

84,923
12
110
165

thanks. any sites that allows you to upload videos and convert them into `.webm`? – Run Feb 05 '17 at 14:00
or better, can I get a `.webm` from youtube videos? – Run Feb 05 '17 at 14:01
@teelou Already gave how to find that info, [html5-video-youtube-and-vimeo-how-to-get-mp4-ogv-and-webm](http://stackoverflow.com/questions/42052198/html5-video-youtube-and-vimeo-how-to-get-mp4-ogv-and-webm-paths-from-the#comment71277010_42052198) ... a simple search on google and you get this info, or you want me to search and find it for you? – Asons Feb 05 '17 at 14:08
what u will get from google search is the answer for downloading videos in mp4 format. that is not my question. – Run Feb 05 '17 at 14:14
@teelou I already answer the above question, which were related to a programming issue, you second is not, it is about some conversion tool and we don't provide such service here at SO ... and I will be surprised if you not already know that, and I still tried to help out by telling you how and where to look – Asons Feb 05 '17 at 14:22

HTML5 + CSS 3 - How to autoplay videos silently?

3 Answers3