1

We've been trying to make embed video responsive on our website and managed to do it with code below. Unfortunately it doesn't autoplay anymore and I honestly can't find any solution to this.

CSS

#embed {
    height: auto;

    text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.homevideo {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.homevideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML

<section id="embed">
        <div class="homevideo"> 
            <p align="center"><iframe width="1000px" height="520px" src="https://www.youtube.com/embed/mUFAaEWb2_E?autoplay=1&mute=0&loop=1&vq=hd1080"name="youtube embed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p> 
        </div>
</section>

Before, we just had an iframe code which looked like it:

<p align="center"><iframe width="1000px" height="520px" src="https://www.youtube.com/embed/mUFAaEWb2_E?autoplay=1&mute=0&loop=1&vq=hd1080"name="youtube embed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

and it worked well, was playing right after you entered our website on autoplay with sound, so we know it's possible. Sadly it wasn't responsive on mobile devices and was messing up our layout so we were looking for solutions to make it look good, but ended up with no autoplay.

Sylwia
  • 11
  • 1
  • I highly recommend you do always self-check your code with a [Markup Validator](https://validator.w3.org/). A markup validator would already show most of your issues such as obsolete attributes aswell as invalid values. the `height`-attribute and the `width`-attribute have no pixel as value just an integer number which already is measured in pixels. – tacoshy Sep 09 '21 at 09:51
  • Mobile browsers block autoplay by default incl. sound. This is in order to prevent the massive unintended use of mobile data. There is no way to overwrite it. On mobile browsers, the suer always have to start streaming a video himself. – tacoshy Sep 09 '21 at 10:00
  • Does this answer your question? [HTML5 Video autoplay on Mobile Browser](https://stackoverflow.com/questions/20499341/html5-video-autoplay-on-mobile-browser) – tacoshy Sep 09 '21 at 10:23
  • @tacoshy on movile devices I get that, it's not possible to make it to autoplay. But when it comes to browsers, we already had a youtube vid that autoplayed with sound on. Then we added css for it to be responsive and it doesn't autoplay anymore. We just want the vid to autoplay with sound on browsers, not on mobile devices. – Sylwia Sep 09 '21 at 12:58

1 Answers1

-2

Please try this

It will auto play.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/mUFAaEWb2_E?autoplay=1&mute=1">
</iframe>

I have tried it, it works on my side

klinsman Agam
  • 80
  • 1
  • 2
  • You miss the question which is about the sound. Also on mobile devcies, a video will not autoplay at any point. – tacoshy Sep 09 '21 at 10:00
  • okay bro, a video can autoplay on mobile with sound, download the video and upload it to your server it will work – klinsman Agam Sep 09 '21 at 10:10
  • https://stackoverflow.com/questions/20499341/html5-video-autoplay-on-mobile-browser – tacoshy Sep 09 '21 at 10:23