0

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?

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Alexandre Aimbiré
  • 1,494
  • 2
  • 14
  • 26

1 Answers1

0

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

Alexandre Aimbiré
  • 1,494
  • 2
  • 14
  • 26