Prevent Background Videos From Pre-Loading On Mobile
Background looping videos have become very popular over the last couple years. They look fantastic, are very engaging, and a nice way to differentiate your company or business from competitors.
The downside to the looping videos is they can be fairly large video files and they don’t work on mobile devices. Most developers understand this and will simply hide the video using CSS on mobile and display an image instead. However, many don’t know that in some cases the background video may still be pre-loading on mobile devices even though it is hidden. How do you prevent this from happening?
Fortunately, we can fix this issue with some jQuery and simple HTML changes. Here’s how we’re going to do it:
First, update your video src from:
TO:
Next, add some additional jQuery that will check if the video is visible. If so, it will swap the data-src element to the src element:
jQuery(
function() {
var bgv = jQuery('#bgvid');
if (bgv.is(':visible')) {
jQuery('source', bgv).each(
function() {
var el = jQuery(this);
el.attr('src', el.data('src'));
}
);
bgv[0].load();
}
}
)
That’s all there is to it! Give it a go and let us know how it worked for you in the comments.
The post Prevent Background Videos From Pre-Loading On Mobile appeared first on WP Cover.
Additional News
Just Launched: GoGuidebook – Digital Guidebooks & Welcome Books For Vacation Rentals
This week we’re excited to debut our new Bold City Agency product, GoGuidebook. GoGuidebook is a platform for creating digital
...
Read more WooCommerce – Automatically Apply Coupon Code Based On State
add_action( 'woocommerce_before_calculate_totals', 'auto_apply_coupon_conditionally', 10, 1 ); function auto_apply_coupon_conditionally($cart) { //$cart = WC()->cart; if ( is_admin() && ! defined( 'DOING_AJAX' )
...
Read more Google Authenticator App Crashes on iOS 14.2 Solution
With the new release of iOS 14.2 for iPhone, there have been major reported problems of the Google Authenticator app
...
Read more Auto-Update WordPress Username If Email Changes
We build out a lot of custom backends and applications on WordPress. A lot of these custom backends require a
...
Read more Adding Attachments To WooCommerce Emails
WooCommerce is a great e-commerce platform that comes with flexibility. One request we recently had from a client was adding
...
Read more Gravity Forms Enhanced User Interface Not Working In Popup
Today we’re going to tackle an issue that, in all honesty, took me a bit of time to uncover in
...