Layering over a video

Discussion in 'Web Design and Development' started by joelm1988, May 29, 2008.

  1. joelm1988 macrumors member

    Mar 25, 2008
    Leeds, UK
    Is it possible to have a youtube video on a website with something over the top of it? For example if something was covering part of the video
  2. angelwatt Moderator emeritus


    Aug 16, 2005
    Try it and find out ;) I've never seen it done or known anyone that has tried. Use CSS to position something absolutely so it's over the video. Then, set its z-index to 1 or higher. Let us know if you try it. I'm a little curious.

    #topthing {
     position: absolute;
     top: 100px; /* adjust as needed */
     left: 100px; /* adjust as needed */
     z-index: 2;
  3. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    I've not tried what follows, but thought I'd suggest a solution via the YouTube API so you could work with multiple videos if desired or at least easily reference the video layer and its size properties dynamically.

    I checked the docs for their JavaScript API which uses SWFObject and allows direct manipulation of the embedded video via the replaceElemIdStr function. This allows you to define the HTML DIV id that contains the embedded video which you can reference and control the display. Their API has convenient event triggers you can use so the overlay can be displayed when/how you want it to, optionally.

    Full details with example API code here, just get a developer key from the site to use the API.


Share This Page