How can I delete a video on mobile in WordPress?

Looking for some assistance with my webshop www.spidercatcher.dk. I'm trying to have a background video display only on PCs, while showing a still photo on phones and tablets. I've tried using a poster tag but I can't seem to scale it properly, resulting in the image being too large on phones and a weird margin.

If anyone can help, the website is built on Wordpress, Woocommerce, using the Flatshop theme.

Below are the HTML and CSS code snippets:

video#bgvid {
    position: static;
    margin-top: -15%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: transparent url(/wp-content/uploads/2016/04/Spidercatcher_vid_frame.jpg) no-repeat 0 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover;
    background-size: cover;
}

<video autoplay loop poster="/wp-content/uploads/2016/04/Spidercatcher_vid_frame.png" id="bgvid">
  <source src="/wp-content/uploads/2016/04/Spidercatcher_vid.mp4" type="video/mp4">
</video>
htmlcsswordpresswoocommerce

Answer №1

To easily customize your website for mobile and tablet devices, you can utilize media query CSS.

@media only screen and (max-width: 600px) {

video#bgvid {
display:none;
}

}

You can adjust the settings according to your screen size by using a similar approach.

@media only screen and (max-width: 320px) {


}

For more information on responsive web design with media queries, check out these resources:

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer №2

Avoid using CSS for this task as it may increase load time due to the image or video still needing to be downloaded. PHP is a better solution in this scenario.

Answer №3

To achieve this goal, one option is to utilize media queries or employ a framework like Modernizr. Instead of embedding the video directly into the website, consider adding it later using either a media query or Modernizr. This not only ensures proper display on devices capable of handling videos but also eliminates potential issues with browsers that struggle to play videos, such as screen readers for visually impaired individuals.

Universal Steps for All Methods

Begin by designing your page for the most basic browser experience. Think about how the content will appear on outdated mobile browsers or when printed on paper.

CSS Media Query Approach

Initially hide the video element and then apply visual effects for screens larger than a specified width (e.g., 700px).

@media only screen and (min-width: 700px) {
video#bgvid {
visibility: visible 
}

Keep in mind that this method requires all browsers to download the video file, potentially slowing down the page loading time.

jQuery Method

A similar outcome can be achieved using jQuery and JavaScript.

if(window.screen.width > 700){
$("#bgvid").html("<video>...</video>")

Alternative Approaches

There are various other methods to accomplish this task, including exploring frameworks like Modernizr. If you start by building the site with a focus on mobile compatibility and then add enhancements for more advanced devices, you may encounter fewer compatibility issues. In general, using jQuery is often considered more user-friendly compared to CSS media queries, leading to fewer problems with incompatible browsers based on personal experiences.

Answer №4

According to @juul van bracht, using CSS to hide content on mobile devices is not recommended.

The most efficient solution is to utilize PHP/WordPress functions:

<?php
if (!wp_is_mobile()) {?>
    <video autoplay loop poster="/wp-content/uploads/2016/04/Spidercatcher_vid_frame.png" id="bgvid">
    <source src="/wp-content/uploads/2016/04/Spidercatcher_vid.mp4" type="video/mp4">
    </video>
<?php } else { ?>
    <img src="whatever.jpeg"/>
<?php }  ?>

Answer №5

When your video is contained within a div and you attempt:

 var video = document.getElementById('video_id');
 video.src = ""

This method will not be effective. To achieve the desired result, consider using this code instead:

document.querySelectorAll('#video')[0].src = "';

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

The font face feature does not seem to be functioning properly in the IE browser

I'm facing an issue with font face in a jQuery popup. It seems to be working fine on Chrome and Firefox, but it's not rendering properly on IE browsers. Font Face Code in css ---------------------- @font-face { font-family: "pt-sans"; sr ...

cssinternet-explorerfont-face

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Just starting out with CSS/HTML and looking for guidance on creating a table with a variable number of rows. Any tips on how to achieve this using CSS? I'm aiming to replicate a table with a similar structure, but struggling to figure out how to defin ...

htmlcss

Translating Encryption from Javascript to Ruby

I have an application which utilizes HTML5 caching to enable offline functionality. When the app is offline, information is stored using JavaScript in localStorage and then transmitted to the server once online connectivity is restored. I am interested in ...

javascriptruby-on-railshtmlencryptioncryptography

The initial value set for the innerHTML property of a div element

I have a requirement in my application where I need to confirm if the container div is empty before adding specific text elements to it. The innerHTML of this div is frequently created and removed within the app, so it's crucial to validate its emptin ...

javascripthtml

alter the property of the vec2 variable

In my vertex shader, I am attempting to alter the attribute vec2 a_position variable that is also used in the fragment shader. This modification is intended to achieve a cylindrical projection of an image. Here is the code snippet from my shaders: <! ...

htmlcanvaswebglprojection

When using jQuery, the content loaded with the $ajax function only displays after refreshing the page

Located on an external server is a directory containing various .html files, including one named index.html. The server has the ability to load either the folder name or foldername/index.html in its URL. Each html file within the directory loads a corresp ...

javascriptjqueryhtmljsonajax

Having trouble with implementing a lightbox form data onto an HTML page using the load() function? Let me help

In my project, I have set up a lightbox containing a form where user inputs are used to populate an HTML file loaded and appended to the main HTML page with the load() function. While I can successfully load the data onto the page, I am facing challenges i ...

jqueryhtmlcssajax

JavaScript does not function properly with dynamically loaded content

Trying to load the page content using the JQuery load() method. See below for the code snippet: $(window).ready(function() { $('#content').load('views/login.html'); }); .mdl-layout { align-items: center; justify-content: center ...

javascriptjqueryhtmlcssajax

Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled? Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe I want to apply this to the elements below (styled in flexbox), either the entire "row" or each i ...

javascriptcssflexboxcss-transitions

Issues with overlapping floating labels in Bootstrap 5

Is there a way to display longer text without it being cut off or truncated, especially in input fields where the full content is necessary for clarity? It can be frustrating when only part of the text is visible. This issue arises from the Bootstrap 5 e ...

csstwitter-bootstrapflexboxbootstrap-5floating-labels

Creating a secure webpage that can only be accessed with a password

Is there a way to create a username/password login page using only client-side technologies without involving the server? Back in school, I was taught to use SQL and Java on the server side for this purpose. However, I'm now faced with a situation whe ...

htmlauthentication

Fetching the jquery variable within an HTML document: A step-by-step guide

Here is the content of my check.js JavaScript file, which includes a function: function fun2(userid) { $.ajax({ type: 'POST', url: 'ex.php', data: {userid: userid}, success: function (data) { ...

javascriptphpjqueryhtml

The background image of the LI element is displayed behind the image within the list item

So, here is the outline of my HTML structure: <li class="block1"> <a title="Block 1 Title" href="get/wzTZKKrI1kQ"> <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg"> ...

htmlcssimage

Styling in Next.js with conditions

I am attempting to create a scenario where a link becomes active if the pathname matches its href value. function Component() { const pathname = usePathname(); return ( <div className="links"> <Link href="/"> ...

cssnext.js

Delete the value from the array and refresh the HTML with the updated total amount, or display '$' if there is no total amount

Currently, I have two inputs: debit and credit. On button click events, they update an array called 'debits'. Debit adds positive values while credit adds negative values. The next step is to sum the values in the array and assign it to a variab ...

javascriptjqueryhtmlarrays

Is the div empty? Maybe jQuery knows the answer

I currently have a <div id="slideshow"> element on my website. This div is fully populated in the index.php file, but empty in all other pages (since it's a Joomla module). When the div is full, everything works fine. However, when it's emp ...

javascriptjquerycss

What could be causing my PHP login page to malfunction?

I'm facing an issue with my code where nothing happens when I click the submit button. This is puzzling as the same code worked perfectly fine in a previous project. I'm unable to pinpoint where the problem lies. Here's the HTML form: < ...

phphtmlmysqlauthentication

Scrolling horizontally within SVG graphics

Check out this JSFiddle body { background-color: #111111; color: #ffffff; /*max-width: 100%;*/ overflow-x: hidden; } .row { max-width: 100rem; } .svgrow { min-width: 70rem; } .svgrow svg { overflow-x: auto; } I am trying to ma ...

htmlcsssvgzurb-foundation

Facing issues with converting SVG to PDF in Rails 5.0

Below you will find two images: the first one is displayed in a browser view, while the second one shows a PDF view. The issue lies with the SVG to PDF conversion. I have dynamically set the stroke-dashoffset value, which works correctly in the browser bu ...

jquerycssruby-on-railspdfsvg

Issue with a Bootstrap panel displaying incorrect border formatting

I am currently working with Angular UI Bootstrap and facing an issue with an accordion component. Everything works perfectly fine in the development environment with the full version of the Bootstrap Cerulean file. However, when I minify the CSS file for p ...

htmlcssangularjstwitter-bootstrap