Help with Layering

I’m a CSS noob having issues trying to figure out how to layer icons on top of an image/iframe.

Here’s the situation. I render a div with an image that looks like it’s a video (but it’s just an image, for performance). When the user clicks on the image, JS swaps out the image with the appropriate youtube embed code and plays the video.

Below the image/video div, I have another div with some action icons (share, like etc). Rather than have the actions below the image/video div, I’d like to put them over the image/video div on:hover. See below image for better description:

Here’s the current structure of my code.

The HTML:

`<div class="trailer">
      
    <div class="youtube-container">
      <div class="youtube-player"  data-id="<%= trailer.youtube_id %>">
          <div class="holder">
          </div>
      </div>
    </div>
    
    <div class="row icons">
      <div class="icon">
        <img src="icon1">
      </div>

      <div class="icon">
        <img src="icon2">
      </div>

      <div class="icon">
        <img src="icon3">
      </div>
    </div>

</div>
`

CSS:

    `  .icons img {
        height: 35px;
        margin: -10px 0 0 5px;
      }

       .icons {
        float:left;
        margin: 30px 10px 10px 10px;
      }

    .icon img {
      height: 55px;
    }

    .youtube-container {
        display: block;
        margin: 20px auto;
        width: 100%;
        width: 100%;
    }

    .youtube-player {
        display: block; width: 100%; /* assuming that the video has a 16:9 ratio */
        padding-bottom: 56.25%;
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        cursor: hand;
        cursor: pointer;
        display: block;
    }

    img.youtube-thumb {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        height: auto
    }

    div.play-button {
      height: 72px;
      width: 72px;
      left: 50%;
      top: 50%;
      margin-left: -36px;
      margin-top: -36px;
      position: absolute;
      background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
    }


    #youtube-iframe {   <--- the iframe dynamically generated when someone clicks the image
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    `

After the page is loaded, Javascript goes through and 1) finds all the .holder divs 2) inserts a dynamically generated image 3) Adds an on.click event listener to .holder that, when clicked, swaps the image for a youtube iframe.

I understand how to implement the “on hover” part, by I need help with CSS and overlaying the icons on top of the image/video. Any help appreciated.

1 Like

Hi there awkward_clam,

instead of using “youtube” in an “iframe element”, why don’t
you just use the “video element” with the “poster attribute”?

Here is an example…

[code]

untitled document html,body { display:table; width:100%; height:100%; margin:0; background-color:#000; } body { display:table-cell; vertical-align:middle; } #video { display:block; width:100%; max-width:640px; margin:auto; } [/code]

coothead

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.