How to get an embedded video to go behind navigation

Sometimes when you embed a video on your web page with an iframe, it interferes with your navigation. The video appears to be on a higher level covering up your drop down menu and other elements. Here’s what you do to fix it.

Add a command at the end of the link in the video embed code

If the video link does not contain a question mark (?), add “?amp;wmode=opaque” to the end.

Example: http://www.youtube.com/embed/GhmUuOsTUk8?amp;wmode=opaque

If the link already has a “?”, add “&wmode=opaque” to the end.

Example: http://www.youtube.com/embed/GhmUuOsTUk8?rel=0&wmode=opaque

Here are some of my sources: http://www.jenkaufman.com/youtube-iframe-embed-video-problem-hides-menus-other-layers-546/ and http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements/

Gloria Wadzinski

About Gloria Wadzinski

Gloria Wadzinski is a multimedia designer specializing in graphic design, website design and video production. She currently lives in Boulder, Colorado. View Gloria's contact information and portfolio at http://gloriaw.net.
Web DevelopmentPermalink

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>