WordPress : How to remove video on mobile?

Question

On my webshop www.spidercatcher.dk I want the background vid only to show on PC, and then have a still photo on phones and tablets, it kinda works when I set a poster tag, but I cannot scale the poster tag properly, so the image is too large on phones, plus the margin is weird.

Can anyone help? The website is set up in Wordpress, Woocommerce, with Flatshop theme.

Here is the HTML and CSS code:

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>

Answer 1

Don't do this with CSS, The image/video will still download (Higher load time). Use PHP for this problem.

Answer 2

its easy you need to use media query CSS . for mobile and table devices

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

video#bgvid {
display:none;
}

}

Same you can set it as per your screen size

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


}

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

http://cssmediaqueries.com/

Answer 3

as @juul van bracht added, it's not good idea to play with css for hiding it on mobile.

best and most efficient way is to go with 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 4

This can be achieved using media queries, or through using a framework such as Modernizr.

It may be easier to think about your question as "how do I add a video background to devices that will display it properly." By removing the video from the basic website and adding it in later using either a media query, or modernizr. you can also remove the Video from other browsers that may also have difficulty in displaying a video. For instance screen readers for blind people.

Basic actions for all approaches

Firstly rewrite your page for what you want the most basic browser to see. Think about the worst phone based browser from 10-15 years ago, working over a dialup connection, or alternatively what you want people to see when they print your page onto paper.

CSS media Query Approach

Set the visibility of the video block to hidden. Then add in the video effects for browsers over a certain screen size (say 700px)

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

This will still mean that all browsers download the video, and slow down the page.

jQuery approach

You can do the same using jQuery and Javascript

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

Other

There are other approaches you can take here to achieve this, look at frameworks like Modernizr. but essentially if you go the other way around - ie build the site for a mobile device, then add what a device can take, you may be better off. I would generally suggest that jQuery tends to be more pleasing than CSS media queries. In my experience, you tend to experience fewer problems with incompatible browsers.

Answer 5

If your video is inside a div and you are trying:

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

That won't work. You have to do something like this:

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