The video header on my webpage refuses to start playing upon loading

I have a video displayed in the header of my website, but it only starts playing once the user clicks on the home link in the menu to navigate to /index.html. It does not play automatically when the page first loads. I have also tried manually entering /index.html in the URL, but that did not work either. Here is the code I am using to display the video:

<video autoplay loop>
    <source type="video/mp4" src="images/untitled.mp4" />
    <source type="video/webm" src="images/untitled.webm" />
</video>

The website where you can see this issue is (source code available for review).

How can I make the video start playing automatically when the page initially loads?

Thank you

htmlcssvideohtml5-video

Answer №1

Have you tried testing it on Chrome? To make it work on Chrome, you will need to disable sound:

<video autoplay muted loop> ... </video>

Furthermore, on some versions of Safari, autoplay may not function properly. You could potentially initiate your video using jQuery, like so:

<video id="video" ...> ... </video>

$(document).ready() {
    $('#video').play();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Simple Selection Panel

Looking to include a simple dropdown menu with 5 choices. Once a selection is made, an answer corresponding to that choice will appear in another field next to it. For example: Choosing France from the dropdown would display 'Paris' in the adjac ...

htmlcsstextboxdropdowntextfield

Customizing ExtJS 4's CSS reset specifically for tailored HTML inside components

I am currently in the process of upgrading an existing application from Ext 3.x to 4. I have successfully enabled Ext's scoped reset CSS option to prevent Ext from applying its CSS reset to my entire application. However, I am now facing a new issue. ...

cssextjsextjs4overridingcss-reset

How to ensure the right size for your sections in HTML5

I am currently learning HTML5 and attempting to create a specific sized section in the browser where various elements like buttons and text will be displayed based on user interaction. However, I am running into an issue with adjusting the size of the sect ...

csshtml

Exploring shader file content within three.js with the help of jQuery

I am trying to retrieve the content of a string that I have imported using HTML from within another script. To include the text file in question in the html file: <script src="shaders/fragmentshader.fs" id=fragmentshader></script> After impo ...

javascriptjqueryhtmlthree.jsshader

The symbols ">>" have been changed to "�"

There has been a report from one of our application users stating that they are seeing the character � instead of >> on their home and other pages. This issue is only affecting one out of 100 users, and the user in question is using IE11. What c ...

javahtmljspspring-mvc

Is there a way to eliminate the gap between my menu choices?

Is there a way to eliminate the black line that appears between my menu options when using CSS hover? https://jsfiddle.net/jameskelly/3ejsu7gx/2/ a:hover { background-color: #ebebeb; font-color: black; } /* Custom styling for the ...

htmlcss

Support for the percent sign in right-to-left languages

Imagine you have the following code snippet: <div dir="rtl"> test 50% </div> It currently displays as test 50%. However, according to this wiki page, for Arabic language it should be shown as %50 test, with the percentage sign before the n ...

htmlangularright-to-left

Non Rectangular Header with Bootstrap's Responsive Navbar

Currently, I'm in the process of developing a website and I've been pondering if it's feasible to design a bootstrap navbar with a uniquely shaped header as a background. I envision the header to resemble something like this: https://i.sst ...

htmlcsstwitter-bootstrap

A guide to adjusting the size of an iframe within a bootstrap modal

I am currently facing an issue where I am trying to display an iframe inside a bootstrap modal. The challenge is that the content within the iframe is dynamic, so the size may vary each time the modal is opened. As seen here, the modal appears too big and ...

htmlbootstrap-4bootstrap-modal

What is the best way to adjust the placement of images and text within bootstrap 5's HTML code?

Hey everyone, I'm new to using bootstrap 5 and I've come across a little issue. If you take a look at this image https://i.sstatic.net/777BS.jpg In my webpage, the Google icon and all the text are currently aligned to the left, just like in th ...

htmlbootstrap-4bootstrap-5

What is the best way to make HTML adjust to SVG scaling?

After applying a scale transform to an SVG, I noticed that the surrounding HTML does not adjust its size accordingly. Here is the SVG in question: <div> <svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)" xmlns= ...

htmlsvgscale

Challenges related to height

Having an issue with height in my code. My footer is set up like this: <html> <body> <div class='wrap'> <div class=principal></div> <div class='clear'></div> <foo ...

jqueryhtmlcss

Creating interactive buttons in Angular 2

I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...

htmlangular

Invoking a function means calling another one simultaneously

There are two buttons in my code: The button on the right triggers a function called update(): <script> function update(buttonid){ document.getElementById(buttonid).disabled = true; event.stopPropagation(); var textboxid = buttonid.sli ...

javascriptjqueryhtmlcssajax

Retrieve information from an external JSON file and present it in a table format - Obtain the most recent data available

I am attempting to extract the data from On the website, there is a dropdown menu that displays two different screenshots. I want to modify my code so that it shows the most recent screenshot data in a table. Here is my current code: http://jsfiddle.net ...

jqueryhtmljsonparsing

Tips for resetting form fields and clearing previous values before resubmitting the form, allowing for a fresh start with empty fields

Welcome to my website! If you visit , you'll notice a feature I've added that clears form field values after submission. However, I'm encountering an issue where the fields remain filled when revisiting the page for another appointment. I at ...

javascriptphpjqueryhtmlforms

disable the button border on native-base

I'm attempting to enclose an icon within a button, like so: <Button style={styles.radioButton} onPress={() => { console.log('hdjwk'); }}> <Icon ...

javascriptcssreactjstypescriptreact-native

Maintaining the original layout upon refreshing the page

Incorporating two forms on my website, I added a button that transitions between the login and sign-up forms smoothly. The process is as follows: Initially, the login form is displayed; clicking the button switches to the sign-up form. Proceeding to subm ...

javascriptjqueryhtmlcss

By clicking on the image, you can expand it to a specific size, and clicking again will return it to its original size. This feature maintains the exact

There have been numerous inquiries regarding how to make an image larger on click, and then revert back to its original size upon clicking again. I've spent the past 10 hours experimenting with many solutions, but none of them achieve the desired out ...

htmlcssimage

What is the best way to resize a Drawable to fit the width of a TextView?

When trying to render HTML with image tags within a TextView, I encountered issues with scaling the images using the getDrawable() code. Here is an example snippet of the code: myTextView.setText(Html.fromHtml(htmlSource, this, this)); @Override public Dr ...

androidhtmlimagelayouttextview