An interactive demo has been created at the following link to showcase the issue: . Hovering over 'about' on the top right menu should activate a dropdown menu with dark opacity directly beneath the menu, overlaying the iframe video.
While everything works smoothly on IE9-11, Chrome, and Opera, Safari displays both the opacity and menu behind the iframe video while Firefox makes the opacity div disappear behind the video. The goal is to resolve this issue so that the menu and opacity always appear in front of the video. Various forums suggest using 'wmode=transparent' or 'opaque' at the end of the video string for YouTube videos, but this doesn't work for BBCI IFRAME videos. Interestingly, setting up a fiddle to demonstrate the issue with all components enclosed in a frameset worked seamlessly in all browsers. Perhaps a clever iframe or subtle frameset/mask could be a solution - any experts out there who can offer a solution?