I am trying to add embedded video onto a page that has a gallery of images, the video embeds and runs well, but the only problem is that when I click on the images to get it opened up in a lightbox, the video remains on top of the lightbox of the image and most of the image remains covered by the embedded video.

Here is the HTML for the whole page (I hope I inserted it correctly) :

<p style="text-align: justify;">[dropcap1]K[/dropcap1]aikoura has a population of around 2100 people, which is really small. However, you don't feel that this is a small town when you go there in the summer, because the population if probably ten times more during the peak tourist season (just guessing). It is famous for sea life, on an average trip to Kaikoura you will be able to see one or more of the following; Seals, dolphins, whales, Albatross, and more. It is a great place to go whale watching.</p>

The problem still persists however. Here is what the code looks like now:

<p style="text-align: justify;">[dropcap1]K[/dropcap1]aikoura has a population of around 2100 people, which is really small. However, you don't feel that this is a small town when you go there in the summer, because the population if probably ten times more during the peak tourist season (just guessing). It is famous for sea life, on an average trip to Kaikoura you will be able to see one or more of the following; Seals, dolphins, whales, Albatross, and more. It is a great place to go whale watching.</p>
<iframe src="http://www.youtube.com/embed/ZawE0Huaz10" frameborder="0" width="320" height="195"></iframe>
<h3>Photos from Kaikoura - <a title="Photos from New Zealand" href="http://www.ehabweb.net/new-zealand/">New Zealand</a></h3>