Video plays in the back on iPhone browsers

I have successfully inserted a video in the background using HTML5 tags:

<video autoplay="autoplay" loop="loop" id="bgvid" poster="/assets/food/home/banner.jpg" muted>
    <source src="http://38.89.136.40/videos/eatwedovideo.mp4" type="video/mp4" />
  </video>

Although it is functioning properly, there are times when clicking on the background causes the video to play on the screen like a normal video playback. In such cases, we are required to click "done" to make it disappear from the screen. I am seeking advice on how to keep this video strictly in the background without transitioning to full-screen play.

If you have any suggestions, I would greatly appreciate your input. Thank you!

cssiphonehtmlbootstrap-4

Answer №1

My solution involved adding the attributes playsInline and webkit-playsinline to the video tag. It's important to note that the controls tag should not be added. This approach allows the video to play within a container, as shown below:

<video autoPlay loop muted playsInline webkit-playsinline>
  <source src="path/to/your/video" type="video/mp4" />
</video>

Best regards :)

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

What is the best way to change the background color of a table cell in HTML and CSS?

Trying to adjust the background image of each data cell to a selected image has been challenging. Using the method displayed below, only the top left corner of the photo appears. The code snippet demonstrates setting the background of each data cell to th ...

htmlcssimagebackgroundstyling

I'm having trouble using jQuery to access my element

Hi there, I am having trouble accessing my button on the page. When I try to click on it, nothing seems to happen. Can someone please help me out with this issue? $(document).ready(function() { $('#cart_inside').load('php/load_Cart.php&a ...

phpjqueryhtml

Is there a way to incorporate a click function into this code if the id and xpath methods are ineffective?

Check out the code snippet below: <div class="btn-group" style="margin-top: -10px; box-shadow: none !important;"> <a class="btn btn-clear store-name headerActive" style="margin-left: 0px !important;" ng-click="account();" _href="#/app ...

cssxpathselenium-webdrivercss-selectorsclassname

Troubleshooting a problem with placeholder styling on Internet Explorer

Encountering a challenge while styling placeholders, particularly in Internet Explorer where the placeholder text color does not change as expected. Instead, it inherits the color of the input field. :-ms-input-placeholder { color: white; } input ...

cssinternet-explorer

Endless cycle of invoking functions in Angular.js

Issue with the template : <div class="container"> <h1>Process Definitions</h1> <table class="table table-stripped" > <tr> <td><strong>Name</strong></td> <td><strong>Id</st ...

htmlangularjs

Placing the image at the bottom of the container

I need help positioning the image in the center of div: #two, with the screen of the laptop displayed in div two and the lower body of the laptop in div: #three. Here is an example image of how I want it to look, but I'm struggling to achieve this. ht ...

htmlcss

The Geolocation API popup on Safari for iOS kept appearing repeatedly

I have successfully implemented a code using the HTML5 Geolocation API to retrieve the user's current position within a mobile website. Although the code functions properly, there is an issue with Safari on iOS. Whenever the page is reloaded, a syste ...

javascriptioshtmlsafarimobile-safari

The feature to select a cell on a Bootstrap table is not functioning as expected

Is there a way to retrieve the Cell value from a Bootstrap table when clicked? I have a method set up, but for some reason, after clicking on the table heading, the tdOnClick() function stops working. It seems to only be functional before clicking on the t ...

javascripthtmljquerybootstrap-4html-table

CSS specificity in Angular components utilizing the /deep/ selector to target a class outside of the component's scope

I have developed a button component for an Angular Component Library that I am currently working on. The button functions correctly, and its implementation is as follows: <sio-button [buttonLabel]="'Button Text'" [buttonFormat]="&apos ...

cssangularsass

Is it possible to increase the font size of the text on my MUI Slider's thumb for customization

Currently, I am utilizing the MUI-Slider component within React to showcase a value. My objective is to personalize the 'thumb' and valueLabel to boast a larger font size and thumb appearance. Despite referencing MUI's documentation on CSS c ...

cssreactjsmaterial-uislider

Is there a method to retrieve fresh data in HTML without the need to restart the server?

I am encountering an issue with my node.js express server. I have an audio file that is being recorded every 5 seconds on my Raspberry Pi with the same name. The problem arises when I try to play this audio file on my website, which refreshes every 10 seco ...

htmlnode.jsexpressraspberry-pi2

Printing doesn't display CSS styling

I am currently working on creating a function to change the font color, however, I am facing issues with the CSS when it comes to printing. Here is the code I have: $('#draw').on('click', 'p', function () { if($(this).ha ...

javascriptjqueryhtmlcss

The boolean value remains constant when using useState

An Alert module pops up when incorrect credentials are entered by the user. It includes a close button designed to hide the alert. The alert function operates correctly on the first instance, displaying a boolean value of true upon activation and switching ...

javascriptreactjsbootstrap-4

Why is my website appearing on Google with the URL as the name?

After uploading my HTML, CSS and JavaScript website online (without the use of any frameworks or libraries like React or Next), I noticed that when I searched for it on Google, the URL showed up as the website name instead (see image here). Following the ...

javascripthtmlcss

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...

javascriptajaxhtml

Could you please let me know how I can align underneath?

Image description can be found here Your assistance is greatly appreciated, as I am currently inexperienced with React and JavaScript. I am self-studying, so please excuse any basic questions. I have encountered a challenge with this issue. In the image ...

cssreactjs

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options: > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3 ...

javascripthtmlvue.jsvue-clijavascript-framework

Implement a top bar above the navigation bar using Bootstrap

Attempting to construct a webpage from scratch for the first time, without relying on a template. I aim to implement a fixed top bar above the navigation bar. Referencing this example: This is my current code: window.onscroll = function() { scrollFun ...

htmlcssbootstrap-4

I don't want my background image to repeat, but I'm not sure how to stretch out the tile

Hey there, I would appreciate it if you could refrain from criticizing me or giving me negative feedback as I have put in the effort to search for an answer. After extensive research, this is what I have found so far. My goal is to set a background image f ...

htmlcss

Is it possible for a user to change the data stored in sessionStorage variables?

Incorporating client-side JavaScript into my project to save certain variables using Web Storage - specifically, the sessionStorage. However, uncertainty exists regarding whether a user holds the capability to alter these variable values. If this is indee ...

javascripthtmlsession-storageweb-storage