Hide div's containing Youtube while printing a webpage

Question

I'm creating a print stylesheet for a webpage which, next to text content, also contains youtube embeds in the content area (for instance).

I don't want to print the youtube's, so I added display:none to the print stylesheet for these div's.

Now the div's are not printed but in the print preview they do take empty space, and thus pushing the text content beneath them.

Resulting in a lot of white space with text under this white space. Not nice. Is there a solution or trick to solve this?

Code:

<div class="bigblok_image">
<object height="325" width="400"><param name="movie" value="http://www.youtube.com/v/waVIqjB0WAU&amp;hl=nl&amp;fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/waVIqjB0WAU&amp;hl=nl&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="325" width="400">
</object>

div.bigblok_image { display: none; }

Answer 1

Add the following in the head section:

<link rel="stylesheet" href="print.css" media="print"/>

In print.css add the following:

#div-to-be-hidden
{
  display:none;
}