Video background with alternate image for touchscreen devices

Check out this website!

The background video is functional on desktops. On smaller screens, an image is shown instead using CSS display property. However, what should be done for touch screens like iPads, which are not exactly small?

Here's the code I experimented with:

<video id="background" width="100%" height="100%" muted autoplay loop>
    <source src="videos/video.mp4" type="video/mp4">
    <source src="videos/video.ogg" type="video/ogg">
    <img src="img/image.jpg">
    Your browser does not support the video tag.
</video>

I included a fallback image in case the device or browser doesn't support the video format. But I suspect that touch screens do support video playback, just without autoplay.

Is there a solution to display a background image on devices that can't play background videos?

Your assistance would be greatly appreciated.

htmlcssvideotabletfallback

Answer №1

It appears that you are already utilizing Modernizr.js - this tool can be used to detect touch-event support and allow you to adjust your response accordingly. In order to target specific elements using CSS, you can utilize the classes that Modernizr applies selectively to the HTML element.

.touch video { ... }
.no-touch video { ... }

To target elements using JavaScript:

if (Modernizr.touch) { ... }
 if (!Modernizr.touch) { ... }

If desired, there are various libraries available for efficiently managing background videos - explore the Media section on Unheap for a range of options.

Furthermore, it is advisable to exercise caution when implementing autoplaying background videos. While visually appealing, they may lead to performance issues, accessibility concerns, longer load times, and more.

Answer №2

Apologies for my delayed entrance into the conversation.

The Modernizr method is typically recommended for detecting touchscreens, but in this case, it appears that the device's touchscreen capability is not a primary concern. Your goal is to target devices with small screens, many of which happen to have touch functionality. However, considering the existence of desktop touchscreens, relying solely on touch detection may not accurately pinpoint small devices.

You can effectively target small screens, regardless of touch capabilities, using media queries.

@media (max-width: 600px) {
    #myvideo {
         display: none;
    }
}

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

Having trouble getting the dropdown button to function properly in my Bootstrap navigation bar implementation

Can anyone help me troubleshoot why the dropdown button is not functioning in my code? I've tried following tutorials and searching for solutions online, but nothing seems to work. Any assistance would be greatly appreciated. <!DOCTYPE html> & ...

htmlcsstwitter-bootstrap-3

Unable to properly access required file path through HTML source

I have a confidential folder named 'inc' where I store sensitive files such as passwords in php connection files. This folder is located at the same level as the 'public_html' folder. I successfully accessed php files with database conn ...

javascriptphphtml

Tips for maintaining variable values when invoking PHP functions

After setting a global variable value in a PHP functions file and successfully using it within one PHP file, I encountered an issue when trying to access the same variable from another PHP file using include("functions.php"). This is the process I followe ...

phphtml

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

I am looking to showcase some TypeScript (angular code) as plain text on my website using prismjs. However, the Angular framework is executing the code instead. How can I prevent it from running? I have attempted enclosing it within pre and code tags wit ...

htmlangulartypescript

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

javascriptcssreactjsnext.jscss-transitions

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

javajavascriptjquerycssliferay

Enhancing Visuals within XSL+XML Documents

Currently, I am working on a project for one of my classes that involves showcasing film information loaded from an XML document. While researching similar questions, I found the answers to be confusing and the solutions did not yield any results. My goal ...

htmlxmlimagexslt

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

javascriptjqueryhtmldom

Scroll issue causing CSS not to be applied to a field within a div

Can someone help me with this issue I'm facing in my jsfiddle example? Here is the link: http://jsfiddle.net/AnnaMiroshnichenko/xjyb8/1/. The problem is, when I scroll the div, the field underneath the scroll does not appear to be applying CSS rules p ...

csshtmlsafariscrollmobile-safari

Creating a link with a POST method and without using a new line

I am attempting to generate a square matrix and send data using the post method. I have discovered a solution involving JavaScript and form submission, but each time a new form is created, it results in a new line being added. Alternatively, if I move th ...

javascripthtmlhref

Looking for browser prefixes for the `text-align` property? We've got you covered! Use `-webkit-right` for Google Chrome and Safari, `-moz-right` for Firefox, and `-o-right` for Opera. But what about

When it comes to browser prefixes or hacks, we often think of: (for Google and Safari) text-align: -webkit-right; (for Firefox) text-align: -moz-right; (for Opera) text-align: -o-right; But what about Internet Explorer? I'v ...

htmlcssinternet-explorer

What is the best way to enable a visible bootstrap tab to be clicked more than once?

Is there a way to override the default behavior on bootstrap tabs that prevents clicking on the currently shown tab? I need the user to be able to click on the tab again even if it is already active, as I am using AJAX to load content and reloading the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is a Responsive Split Layout the Solution for Your Web Design Needs?

I'm looking to create a webpage layout where the left half of the viewport is for Login and the right half is for Signup. This layout should be split side by side on tablets, desktops, and large screens, but stacked vertically (Login on top, Signup on ...

htmlcssbootstrap-4

Integrating a search box with radio buttons in an HTML table

I am currently working on a project that involves jQuery and a table with radio buttons. Each button has different functionalities: console.clear(); function inputSelected(val) { $("#result").html(function() { var str = ''; ...

javascriptjqueryhtmlbutton

What is the most effective way to store HTML templates on a webpage?

As I work on developing a complex JavaScript interface for my website, I have decided to utilize the jQuery templates plugin to create elements based on queries to a JSON API. However, I am faced with an issue: I anticipate needing numerous templates for ...

jqueryhtmltemplatesstorageunobtrusive-javascript

optimal method for organizing design elements

I have a container with 9 square-shaped divs that I want to arrange in the following layout: It should resemble something like this: _________ ____ ____ | A | B | C | | |____|____| | | D | E | |_________|____|____| | F | G | ...

htmlcsslayoutflexbox

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

javascriptjqueryhtmlcssnode.js

What should be done if an image is not wide enough to stretch it to match the width of the window?

When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its wi ...

javascripthtmlcssimagenext.js

How can I use jQuery to submit a form that has been removed from the document?

Having a popup with a form inside, the issue arises after clicking "save" and the popup disappears. As a workaround, an attempt was made to clone it using var form = $(this).clone();, followed by calling form.submit() but unfortunately, this method did n ...

jqueryhtml

Having Troubles with PHP File Upload Form

Executing index.php initiates the user input of metadata and files: <!DOCTYPE html> <html lang="en> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"/> <meta http-equiv="X-UA-Compati ...

phphtmlfile-uploaduploadfilesize