I encountered a difficulty in getting my video to play properly on the Safari browser

I am trying to figure out why my video won't play on Safari, even though it works fine on Google Chrome and Edge.

https://i.sstatic.net/oZQVo.png

Below is a snippet of my HTML code:

<video width="640" height="360" controls="true" autoplay loop muted playsinline>
  <source src="/Perso/WebSite.nsf/vLUpage/VIDEOS/$File/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Could CSS be the solution to this issue?

Any assistance you can provide would be greatly appreciated. Thank you!

htmlcss

Answer №1

To stop cross-site tracking prevention on your Apple device, go to Safari > Settings > Privacy.

Check out this link for more information:

Answer №2

In order to play a video on safari, the user must actively initiate an event instead of it playing automatically. This ensures that the user is engaged and in control of when the video begins.

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

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

On my website, I have successfully implemented two basic Show / Hide links that are working great. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" conte ...

javascriptjqueryhtmlhideshow

Is there a way to delete a table's row using JavaScript?

Hey there, total newbie to coding here. I'm working on a simple to do list project. The adding function is working great, and here's the code for it: let salvar = document.getElementById("salvar") let remove = document.getElementById("remove ...

javascripthtml

What is the best way to ensure an input field and a button are aligned perfectly within the same div tag and of equal height?

During a recent HTML-CSS project, I encountered an issue where I struggled to ensure that two elements within a div tag were the same height. The elements in question were an input field and a button with an icon. Here is a snippet of the relevant HTML cod ...

htmlcssfrontend

Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Currently, I am facing a challenge in dynamically adjusting the width value for a <div> element serving as a coloured bar within an HTML template used for PDF generation. While I can successfully set other values using something like {{my_value}}, ap ...

htmlcssnode.jsexpress

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

I'm currently dealing with an issue regarding my accordion design. I have customized the stylesheet using themeroller, but when I collapse one of the sections, the header changes to black instead of reverting back to its original red color. I've ...

jquerycssaccordion

Angular's Conditional ng-if Error

Encountering an error link from Angular Js [1]http://errors.angularjs.org/1.2.10/$parse/lexerr?p0=Unterminated%20quote&p1=s%2013-14%20%5B'%5D&p2=recipe.ID%20!%3D%3D' I am struggling to implement the solution for this error. Any help wou ...

javascripthtmlangularjsaccordionangular-ng-if

Utilizing several carets in a single or multiple text areas and input boxes

Just a quick question... Can a textbox have two carets simultaneously, or can we have two separate textboxes both focused at the same time? I am aware of simulating this using keydown listeners but I'm specifically looking for visible carets in both ...

javascriptjqueryhtmlforms

Extract the URL parameter and eliminate all characters following the final forward slash

Here is the URL of my website: example http://mypage.com/en/?site=main. Following this is a combination of JavaScript and PHP code that parses the data on the site. I am now looking for a piece of code that can dynamically change the URL displayed in the ...

javascriptjqueryhtml

Stop closing the bootstrap modal popup when the space key is pressed

Is there a way to prevent the model popup from closing when the space or enter key is pressed on the keyboard? I have already tried using data-backdrop="static" data-keyboard="false" but it still closes. Additionally, I have ensured that the form tag is no ...

javascripthtmljquerybootstrap-4

Angular material is experiencing an issue where content is being cut off or

I am currently working on a project using AngularJS for a web application. I have encountered an issue where some of the content in the md-content element is being clipped. For instance, the body tag has the style: overflow: hidden, and the child md-conte ...

javascripthtmlcssangularjsangular-material

Creating dynamic CSS in .Net Core using Tag Helpers instead of inline styles

Is there a method to dynamically insert CSS into the stylesheet without using inline HTML with TagHelpers? While SetHtmlContent generates dynamic HTML, is there a similar method for CSS? It's commonly recommended to keep CSS and HTML files separate. ...

c#htmlcss.net.net-core

Move the text to the following line if a horizontal scroll bar is visible using JavaScript/JQuery and CSS styling

I have a section with multiple div elements...how can I ensure that when there is horizontal scrolling in the section, the hidden divs shift to the next line? HTML <section id="a"> <div class="num"> <div class="num"> <div class="num" ...

javascriptjqueryhtmlcss

Is the maxlength attribute malfunctioning in Chrome and Safari for HTML forms?

<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius"> I found this HTML snippet using the Firebug tool in Chrome. In Chrome and Saf ...

html

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

javascriptjqueryhtmlcss

Storing executable scripts in HTML5 LocalStorage allows for the dynamic creation

As I work on a hybrid app with its own local HTML and JS files, there are times when I need to load additional small executable JS scripts and CSS from the server. Currently, I achieve this by using $.getScript, which has been working well. In order to ma ...

javascriptjqueryangularjshtmlcordova

Ways to identify if the requested image is error-free (403 Forbidden)

One of my scripts loads an image from a specific source every 300 ms, but sometimes it receives a 403 Forbidden response. When this happens, the image element ends up blank. I want to find a way to verify if the image has received a valid 200 response befo ...

javascripthtml

Enter the [color] HTML5 code and check for compatibility with all the latest web browsers

I am interested in implementing a color picker functionality using the input[color] element in HTML5. I would like to confirm if this method is compatible with all modern browsers. Additionally, I am curious if there are alternative ways to achieve this, ...

htmlbrowser

Saving the retrieved data from a JQuery $.post request into a JavaScript global variable

Currently utilizing Javascript and JQuery. A declaration of a Variable var RoleID=""; is stationed outside all functions. There exists a function: role_submit(){ var role=$('#emp_role').val(); var url="submitrole.php"; $.post(url, {role2: rol ...

javascriptphpjqueryhtmlajax

One particular page is having trouble loading CSS, whereas it loads perfectly fine on a different page

I have two pages, 403.html and 404.html, both of which need to load the same style.css file. Strangely, when I visit the 403.html page, the CSS loads perfectly fine. However, when I navigate to the 404.html page, even though it has identical code with only ...

htmlcss

Position the Figcaption over the Image

Running a website, I am facing an issue with adding copyright information to the top-left corner of an image. The img element is set to float:left; and the figcaption appears after it. However, there are some complications: 1) Using the position:absolute ...

htmlcssimage