Search code examples
htmlgoogle-chromehtml5-videobxslider

HTML Video autoplay not working with bxSlider on Chrome

So I've made this slider using bxSlider and it works great. Except on Chrome. In Chrome it doesn't read any of the attributes inside the <video> tag while nested inside the slider. So no autoplay and the controls are still available.

Here's the code, it's pretty straightforward:

<ul class="slider bxslider" id="slider">
    <li id="01" class="slide">
        <video autoplay loop muted poster="img/01.jpg">
            <source src="img/pickup.webm" type="video/webm">
            <source src="img/pickup.mp4" type="video/mp4">
        </video>
    </li>
    <li id="02" class="slide">
        <img src="img/02.jpg">
    </li>
</ul>

This works fine on every other browser. If I use the same code outside the slider <ul>, everything works. I've found some hacks using JS that should resolve the issue, but I'd prefer to solve this without using JS. Any thoughts?

Solution

  • Adding video: true and the fitvids.js plugin resolved the issue.