'Autoplay' on video is not working

I want to add a video that plays by itself and loops, without showing controls. When I add ‘controls’ to my code, the controls show and the video plays just fine. When I change ‘controls’ to ‘autoplay’ and refresh the testing page, the video doesn’t play.

Here is a link to when i use ‘controls’

Here is a link to when i use ‘autoplay’ and ‘loop’

 <video controls autoplay>
  Your browser does not support the video tag.

Check this code … hope this help you… :blush:

1 Like

You have some conflicting logic.

So if you make something a link, ie wrap it in <a>, then that means if you click/tap on anything defined inside it, you go to that URL.

But you’ve put something in the link tags that needs to be clicked/tapped on to work. So that overrides the link behaviour if you have controls: it has to, otherwise a user couldn’t start/stop the video. So in your first example, the link does nothing: clicking on the video brings up the controls for the video.

What seems to be happening when you remove controls and use autoplay only is that the link behaviour wins. I assume that is because there is no way for a user to stop the video: the code that makes videos work in the browser also seems to be ensuring that setting autoplay has no effect in this situation. This is afaics good behaviour, it should work like this – you should not be able to remove my ability to stop a video.

Think about what should happen when you click on the video. There has to be a way for a user to stop the video, that’s mandatory. But if that’s the case, then the link, logically, can’t work when you have it set up as you do here. You have attempted to remove the users ability to stop the video, so link behaviour wins.

1 Like

Thank you for your answer.
I’m still a little confused here, but what I’m getting from this is: Me wrapping everything in a link tag affects the behaviour of what’s in it. So removing the tag would make the video work like a regular one… right?

That would be correct, yes.

When you click whatever is wrapped in an <a> tag, that tells the browser to navigate to another web page.

If you put something in the <a> that needs to be clicked to interact with, like a <video>, what is supposed to happen?

If the answer is “navigate away from the webpage” then you can’t logically interact with the video. If the answer is “interact with the video” then you can’t logically navigate away from the web page.

This is what I mean by conflicting logic, it doesn’t make sense.

Hello again. Sorry for the late update

So I tried removing the <a> tages with the codepen links I sent, and unfortunately it didn’t work. I tried it again in the actual website code where I had the problem on vscode, hoping that it would work there, but it didnt work there either.

However, I realized that when I first run the actual code on vscode using a live server(while I have autoplay and the <a> tags), the autoplay doesn’t work, like I reported but then after I make a change anywhere else in the code, the autoplay works. I’m not sure if this is because there is a problem with my vscode or there’s a mistake somewhere in my code, but i’ll try and host the website and see if the autoplay doesn’t work, and then see what happens from there or give an update

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.