Restrict the loading of the html5 video element on touch devices to improve performance

Currently, I am in the process of creating a fullscreen video background. Typically, for touch devices such as iPads and iPhones, I would hide the video element using CSS and display an image instead.

Out of curiosity, I decided to explore the responsive solutions used by different websites for their HTML5 video backgrounds. During my research, I discovered that AirBnB does not load the HTML5 video element at all on touch devices (specifically tested on iPad and iPhone, haven't tested on Android yet). When inspecting the website on a touch device, you'll notice that the video element is completely eliminated.

Therefore, my query is: What is the most effective method to prevent HTML5 videos from loading on touch devices?

I would prefer a solution involving PHP or jQuery (I also have Modernizr integrated into my site).

csshtmlresponsive-designhtml5-video

Answer №1

When using JavaScript:

if("ontouchstart" in document.documentElement){
    var myVideo = document.querySelectorAll("video")[0];
    var myImg = document.createElement("img");

    //Set attributes for the new image here

    myVideo.parentNode.replaceChild(myImg, myVideo);

}

An issue with CSS media queries is the inability to directly detect touch devices.

Answer №2

To ensure cross-browser compatibility, consider using a placeholder element in your code. Here's an example:

<img src="background-img.jpg" data-video-src="video.mp4" class="video-placeholder" />

Add a listener for clicks on elements with the class video-placeholder, and replace it with an HTML5 video element when clicked:

$('body').on('click','.video-placeholder', function(event) {
  //Create video element
  var videoSrc = $(this).data('video-src');
  var video = $('<video></video>');
  video.load(function() { /*Perform actions on load*/ });
  video.attr('src',videoSrc);
  //Replace element
  $(this).replaceWith(video);
});

This is a basic approach to prevent videos from autoloading until the user initiates playback.

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

Discover the best way to reference a JavaScript variable within an HTML form textfield

I'm having trouble with a script that is supposed to display the selected value from a drop down list in a text field on an HTML form. When I select an option, the value is not appearing in the text field. Can someone please assist me with this issue? ...

javascripthtml

Modify the background color of a single page while keeping the other pages unchanged

Is there a way to have a blue background on only one page of my rails application, while keeping all other pages with a white background? I attempted using the following code: <%= javascript_include_tag params[:controller] %> or <%= stylesheet_ ...

cssruby-on-rails

My code seems to be experiencing issues with the carousel functionality despite incorporating Bootstrap

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <% campground.images.forEach((img,i)=> { %> ...

cssbootstrap-5

I'm encountering some strange blank white space when I view my webpage on a phone or Safari. It seems to be affecting the CSS grid and flexbox of images

Currently, I am engaged in a 180-day challenge to create webpages on . For website number 9, the task at hand is to showcase 8 images in a grid layout. Surprisingly, this layout appears flawlessly on my Mac when using Chrome but encounters issues displayin ...

htmlcssflexbox

Creating a circular gradient in CSS

Does anyone know the steps to create a radial gradient in CSS that will match the background shown below? ...

cssgradientradial-gradients

What is the best way to store HTML in a variable as a string?

Imagine if I have a variable: let display_text = "Cats are pawsome!" I aim to show it as such: <div> <b>Cats</b> are pawsome! </div> To be clear, dynamically enclose the word "cats" whenever it shows up. ...

javascripthtmlreactjsfrontend

Tips for properly setting up a loop to effectively showcase all available data

I am encountering a strange issue when trying to display all incorrect answers in a table for each question. For some reason, one of the rows is showing up empty. This problem only occurs with question 2, which happens to have multiple correct answers. I s ...

phphtml

What is the best way to eliminate the excess height in my <li> element?

I'm a little unsure about how to articulate my question, so I'm just going to share the code: body { background-color: #232026; background-image: url('galaxy16cropped.jpg'); background-position: center top; background-repeat: ...

csshover

The use of JavaScript within the code results in the <header> and <nav> elements failing to display on the browser

Currently, I am tackling a webpage project that involves using scripts in both the head and section elements to generate a table where clicking on the cells changes their color randomly. However, a glitch seems to be hindering the display of the header and ...

javascripthtmlcss

Tips for repurposing a "for" variable in Django

I'm attempting to present my data frame in a table on my web application without using .tohtml because I require a dynamic table. However, it seems that I am unable to utilize the key/column variable from my loop: <table id='bdd_table'> ...

htmldjangodjango-templates

What causes ngb-tabset to reset to the first tab upon being hidden and then shown again?

I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead. <div * ...

htmlcssangularng-bootstrap

What is the best way to style a tooltip in an ASP.NET application using CSS?

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { foreach (TableCell cell in e.Row.Cells) { ...

javascriptjquerycssasp.net

Troubleshooting problems with image display following jQuery animation

Check out this awesome page I found: where you can see a neat list of blog posts displayed in rows of 4. I've added a cool jQuery animation to the 'cards' so that they fade in one by one: jQuery('.fade-in-post-container .elementor-po ...

javascriptjqueryhtmlcss

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?

Currently, I am utilizing the next/Image component for setting an image and applying styling through tailwindcss. However, I have encountered a roadblock at this juncture. My Objective My goal is to dynamically change the src attribute of the image based ...

javascriptcssreactjsnext.jstailwind-css

JavaScript to adjust the size of a div

I have a hidden div in my JSP code that I want to move from one tab to another tab based on the onclick event of the tabs. <div id="addprojectname" style="-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: ...

javascriptcssjsonjsp

Styling PHP echo in HTML

This seems like it should be simple, but there's clearly something I'm missing here. If anyone can point me in the right direction and give me a hint, I would truly appreciate it! Thank you and have an amazing day! <?php $code = '1 ...

phphtmlemailecho

Where could one possibly find the destination of the mysterious <circle>?

I want to implement a simple pulsating animation on a circle svg element. I attempted using a transform: scale(..,..) animation, but it seems to be shifting the entire circle within its container instead of just scaling the element itself. This is the cur ...

csssvgcss-animations

What is the best way to iterate through an object using NgFor?

One scenario involves managing multiple students with various details such as name, email, phone, etc., along with a note object: { "_id" : ObjectId("5b9551a60e89ad15a8ff77fb"), "name" : "RICHE", "note" : [ { "subject" : " ...

htmlangular

How to add a line break within the :after pseudo-element using CSS

I've been struggling to split text inside an :after pseudo-element of a label that receives its content from a data- attribute. I've attempted using word-break, as well as playing around with width, max-width, and position:relative, but nothing s ...

htmlcss

The issue of apples failing to spawn correctly in the Snake game

My Snake game seems to have a bug that causes some strange behavior whenever an apple is collected. Upon collision, the apple disappears and a new one spawns in a new location, but then the original apple reappears in its initial spot. Subsequently, when t ...

javascriptjqueryhtmlcsscanvas