Remove floating videos off news sites – How to get your sanity back

I love reading the news on the web on 24×7 news sites like Fox News. And up until the past couple of years, these sites did a great job with their videos being available to watch WHEN I PRESSED THE PLAY BUTTON!

But someone, I know not whom, decided that it made much more sense to auto-play videos and also to set the video to follow the user down a page as they scroll through the article they are reading.

And the worst of it was that once one site did it, they ALL started doing this. It was a case of “Wow! That’s cool! Let’s do that with our content too!”

They forgot to ask how the end-user would perceive this. And trust me, the end-user and consumer of these articles are NOT happy with this latest assault on their senses.

This is abuse of an end-user at the highest level. It is bad enough that sites out there are constantly hammering you to get notifications from them when you visit their sites, but quite another when a video literally chases you around demanding to be seen.

I am reminded of the scene in Jurassic Park where Jeff Goldblum reacts by saying that just because you can do a thing doesn’t mean you should. Web site developers think that people want to be hit with intrusive videos and content when, in fact, the message from the end-users is a nearly universal NO to bombarding folks who just want to read a news article in peace without a video screen harassing them to watch it.

Fox isn’t the only site doing this. It seems to be a kind of disease that infects the web site building community that if a feature or new technique is available, everyone adds it to their sites even if the end consumer doesn’t want it.

So the challenge I had was to find a way to stop the videos from being shown on a news article and to stop the floating iframe video from walking down the page with me. And I found a super-simple solution that worked for the Fox site.

I use the Firefox browser as a default browser for my web surfing and thus the technique I share here is useful for this browser, using the Greasemonkey plug-in to add overrides of my design to seize control back of my viewing experience.

The first step was to look at the source code Fox uses for their videos. And I found that they had a class called “video-container” that wraps around all of their videos in articles they write. I am certain that this same sort of thing is used across a lot of web sites using this same technique for floating video iframes.

Code for Fox News video play – Note the div class of “video-container”

Greasemonkey

The next step is to write the code to do this. First, make sure Greasemonkey is installed in FireFox and then add a new script. Greasemonkey allows you to edit and add content right from a new tab in your browser. It is an awesome sculpting tool for doing all kinds of in-line modifications that place the power back in YOUR hands and not in the site designers whose motives are often less than inspired or are good for you.

Once you’ve opened the new script tab in Greasemonkey, cut and paste the script below into your new script and save it:

The Code

// ==UserScript==
// @name Remove Foxnews Floating Video
// @namespace http://www.foxnews.com
// @include http://www.foxnews.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant none
// @noframes
// ==/UserScript==

$(‘.video-container’).remove();

The Pros and Cons

This script does one thing well. It completely stops the video from loading in the article you are viewing. If you wanted to keep the large video iframe in the article, this won’t do that. It does, however, leave the video link to manually watch the video if you so choose to watch it.

The key element in the script is that the video-container is set to “remove” so that there is nothing to display. A more ideal arrangement might leave the large video iframe in place and only prevent the scrolling portion of the iframe from being seen, but I found this solution we have presented to be elegant and simple. If I want to watch the video, I simply press the link that remains to view the video on my own terms.

This script might work with Greasemonkey equivalents in other browsers. And for other web sites, you will need to modify the script accordingly after studying the iframe container code on these other sites.

A note to site developers

I will reiterate a point. Just because you can do a thing does not mean you should. I conducted an informal survey and the upshot is this: You are pissing off your viewers. They don’t like being harassed. And they will leave your site faster than a velociraptor running from a T-Rex if they continue to be harassed for the simple crime of visiting your site.

I shouldn’t have to be developing these scripts to protect users from your lack of self-control and tone-deafness to what users want from a web site. There is an old saying with web site development that “Less is More” and when you web site coders and producers truly embrace this philosophy and live it on your end-products, you will be doing your customers a great service.

Don’t want to believe me? Watch your site logs and see how many people you are losing because of these ridiculous techniques for force-feeding content on people. Your board of directors will react much as Jeff Goldblum did in Jurassic Park below. It’s your choice.