Hide HTML 5 Video Black Flash Box With jQuery

When showing an HTML 5 video element on a non-black background a black rectangle flashed on the screen when the video element initialised but before the video file loaded.  Here is how I avoided the problem.

Attempts to use

[codesyntax lang=”css” container=”none” strict=”no”  doclinks=”0″]

video{background: #fff !important;}



[codesyntax lang=”css” strict=”no” doclinks=”0″]

video{background-color: #fff !important;}



I even tried doing the same on the <source> tags.

One solution is to use a plain “poster” image that matches your block colour.  This works in general.  However, in my case, I wanted to show the first frame of the video and wait.  Using the poster, just showed the (blank) poster until the video played.

My Solution

As the rest of my site was using jQuery I implemented a quick solution base on these principles:

  1. hide the video with css to avoid the flash before it was ready
  2. show the video when it was ready to play.


[codesyntax lang=”css” strict=”no” doclinks=”0″]

video{visibility: hidden; /*using visibility rather than display maintains the page position and space*/}



[codesyntax lang=”javascript” container=”pre” doclinks=”0″]


    jQuery("video").on("canplay canplaythrough",function(){



(Note I am using jQuery rather than $ to distinguish between jQuery and Prototype which is also being used on the site.)

Of course whenever you show a hidden thing with Javascript you should make sure you also include a <noscript> that shows the elements that you need, just in case. Shame for those peeps not using Javascript (whoever that might be) to not see your video. They will get the flash but tough.

[codesyntax lang=”html4strict” doclinks=”0″]





Facebook Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Apply your human brain cells and complete this highly complicated maths problem *