Layering over a video

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

  1. joelm1988 macrumors member

    Joined:
    Mar 25, 2008
    Location:
    Leeds, UK
    #1
    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

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.

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

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    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.

    -jim
     

Share This Page