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

Tips for creating a deepCss selector for an input Textbox in Protractor

When I attempt to use sendKeys in an input textbox with Protractor, the element is located within a shadow-root and there are three separate input textboxes. ...

htmltypescriptseleniumcss-selectorsprotractor

Forwarding the main webpage from the child Html.renderAction without the need for Ajax, Java, Jquery, or similar technologies

Having an issue with a form in Html.RenderAction where after submitting the form, I need to reload the parent but keep running into the error message "Child actions can not perform redirect actions." Any suggestions on how to resolve this without using Aja ...

c#htmlasp.net-mvc

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

After successfully testing my Azure function locally, I deployed it only to find that it fails to trigger when a file is uploaded to the video-temp container. { "bindings": [ { "name": "myBlob", "type&qu ...

javascripthtmltypescriptazureazure-functions

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

After conducting research online, I found myself unable to resolve my issue due to my lack of proficiency in English. I apologize for any confusion caused and would like to revisit the topic. The problem lies with my navbar toggle that is not functioning ...

javascripthtmlcssbootstrap-4

Inject an HTML or jade webpage into a div within another HTML or jade webpage

I'm facing an issue in my Node.js project with a script (JS) that is responsible for loading a Jade page into a div of another Jade page using $("#div").load(directory). Despite specifying the directory of the jade page to be loaded, I keep getting an ...

javascripthtmlnode.jsexpresspug

What is the best way to line up three divs horizontally and center the contents inside each one?

I'm brand new to CSS and need some help simplifying things. I am trying to create 3 divs that are all the same size, placed next to each other, with centered content in each one. Currently, I have a central div with a rotating image, and on the left a ...

htmlcss

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

javascriptjqueryhtmlcssdirectory

Step-by-step guide to implementing a month and year date-picker in Mozilla Firefox

I'm looking to create input fields where users can add the month and year. I tried using the code below, but unfortunately Mozilla Firefox doesn't support it. <input type="month" id="start" name="start"> Does ...

javascripthtmlcss

Attempting to align the fixed banner in the middle of my blog

I have spent hours combing through code after code on this site, trying to center my fixed banner without success. I am feeling frustrated and in need of some assistance. Here is the CSS snippet I have been working with: .heading { position:fixed; ...

csscentertumblrfixedbanner

Tips for creating a margin on an HTML button's background color

My bootstrap button has dimensions of 46 x 96px and a border radius of 22px. When hovered, I would like the background color to only extend up to 40 x 90px, without filling the entire button. I understand this can be achieved using a box-shadow, but since ...

htmlcsstwitter-bootstrapbutton

Disabled text selection in Internet Explorer

I am in need of making one HTML element (Label) unselectable for IE. I have tried using the following methods: Unselectable=on onselectreturn=false; Unfortunately, none of these solutions are working for me. For Firefox and Chrome, I've successful ...

htmlcssselect

Getting Your Content Centered Horizontally with Fixed Positioning in CSS

I would like the div to be centered horizontally with a fixed position, but it doesn't seem to work in my code. Can someone help me troubleshoot? Check out the demo here. HTML: <div id="fancybox-thumbs" class="bottom" style="width: 675px;"> ...

htmlcss

Tips for displaying a loading indicator above a form

I've been struggling to figure out how to display a loading indicator on top of my form without messing up the styling... My goal is to show the loading indicator when any action, like deleting an item or changing quantity, is triggered in React.js + ...

javascriptcssreactjsoverlaymobx-react

I developed a website and also created a mobile.html version, with the desire to seamlessly switch between the two based on screen

I have two files, home.html and mobilehome.html, and I am trying to switch between them when the screen width goes below a certain size. if (screen.width <= 600) { document.location = "HomeMobile.html"; } This approach works well in Respon ...

jqueryhtmlcssviewport

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

I have been trying to figure this out for hours. The goal is to submit a form only if one of the inputs matches a PHP echo. To simplify the script, it looks something like this: <head> </head> <body> <?php $A = rand(0,10); $B = r ...

javascriptphphtmlonsubmit

The processing indicator fails to function properly when trying to refresh a jQuery datatable

I am currently customizing the loading indicator for the datatable using a spinner called startLoadGlobal(SPINNER_DATA_TABLE_FINANCEIRO_CARREGAR_REGISTROS) in jQuery. It works correctly when I initially load the datatable, however, when I reload it, the sp ...

javascripthtmljqueryjquery-uidatatables

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Hey there, I'm currently working on a website using Next.js. I've converted the HTML elements of a page to JSX elements but for some reason, the CSS of the template isn't showing up. I've double-checked all the paths and even updated th ...

javascripthtmlcssreactjsnext.js

Combining two HTML tables using jQuery/JavaScript

My table is displayed below: <table id="first" class="merge"> <tr> <td>Mick Jagger</td> <td>30</td> <td>50</td> <td>10</td> </t ...

javascriptjqueryhtmlhtml-table

Embed a Telegram account onto an HTML page using the <iframe> element

Is there a way to display the personal Telegram account in an iframe tag? I experimented with the code below, but unfortunately it did not produce the desired result: <iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe> ...

javascriptjqueryhtmlajax

Navigating Divs Using jQuery

I am working with a class that has multiple divs, each with a unique id attached to it. I am using jQuery to dynamically cycle through these divs. This is a snippet of my HTML code: <div id ="result">RESULT GOES HERE</div> ...

javascriptjqueryhtmlcss