I use Firefox, and I've looked a little into creating a user defined style sheet, but honestly don't know how I would basically nullify 1 element on the page. I've tried using RIP (Remove It Permanently), but it only seems to work as a page is being loaded. If the page changes after loading, RIP isn't called again.
The problem, for me, is specifically related to foxnews.com. I've read of others having the same problem with different sites.
When I open a page containing video and then scroll down, the video gets shunted to the right side of the screen and stays there. If I click the exit button, the video is restored to it's original position on the page, but play back stops. If I attempt to play the video and scroll down, again, the same problem occurs. If I open up the dev tools and select the element, I can delete it, and the video goes back where it is supposed to. At this point I can play the video and scroll as I wish, without being bothered by a floating video. I believe its related to dynamic scripting, HTML5, or java. I haven't really been able to narrow it down.
Here are a few screen shots to show you exactly what the page is doing, and the differences in the code, specifically <div class="video-container" ...> vs <div class="video-container sticky-video sticky-right"...> (highlighted in blue)
Ideally I'd like to block or change the way Firefox handles pages that attempt to insert the "sticky-video sticky-right" and simply keep the default "video-container" element. Short of disabling CSS, globably, I don't know how to solve this issue.
If you've got any ideas, or can point me in the right direction, it would be much appreciated.