Image in front of Embedded Video

Keryth987
Keryth987

OK, so, what i'm trying to do is place an image over an embedded YouTube Video. To frame it so to speak. I thought it would be a simple matter of setting the Video's z-index to -1, but for some reason while it works in the preview, it places it behind the default whitebox OP provides

 

Heres my code


<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/150040/assets/654986/Campaign_Trailer.png?1477016817"; title="Campaign Trailer" alt="Campaign Trailer">

<div class='oembed external-link 'style="position:absolute;top:0px;left:210px;Height:200px;width:330px;border-color:#303030;border-style:solid;border-width:6px;padding:6px;background-color:#202020;border-radius:6px;"><a href='

 

Comments

  • Keryth987
    Keryth987
    Posts: 949

    By the abject silence I think it safe to assume this is not something Textile can handle. Oh well.

  • cgregory
    cgregory
    Posts: 777

    Not necessarily. It could also mean i completely forgot you asked about this and so I never tried doing it.

    That being said, i would likely cut that up into 3 images. The reason being is that if it is one image that completely covers the video you will not be able to press the play button of the video because you will be pressing the transparent part of the image.

    once it is cut into 3 images you should be able to position them where you want them in comparison to the video.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 777

    So basically, i did this with two images.Granted my two models show a little more skin that yours. But you could add the third image of your text at the top.

    image

     

    <div>

    <div class='oembed youtube'><a href='



    <img class="leftimg" STYLE="position:absolute; TOP:100px; LEFT:0px; width:300px;"   src="https://db4sgowjqfwig.cloudfront.net/campaigns/116780/assets/656658/Viper2x.png">;



    <img class="rightimg" STYLE="position:absolute; TOP:100px; LEFT:655px;width: 300px"   src="https://db4sgowjqfwig.cloudfront.net/campaigns/116780/assets/656659/XCOM2_Berserker.png">;

    </div>

    Basically the embedded video with two images that I moved around. You may wish to use relative rather than absolute, but absolute positioning is quicker for mockups.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • abu_is_evil
    abu_is_evil
    Posts: 168

    Looking good 

    Just trying to help out.

  • Keryth987
    Keryth987
    Posts: 949 edited October 2016

    Thanks CGregory.

     

    And sorry if I sounded exasperated. The message had been up for a while and I just figured it couldn't be done. I've run into a few walls with textile

    Post edited by Keryth987 on

  • Keryth987
    Keryth987
    Posts: 949

    Thanks again

    If anyone wants to see how it looks now, see HERE

    Note: Images are temporary. Campaign if it happens is several years away

     

  • Johnprime
    Johnprime
    Posts: 252

    I started to try and address this but got side tracked and never came back to the post. Starting again, I know that with HTML 5, you have to make sure all elements are using positioning when you want to use the z-index, but off the top of my head, I don't remember what you have to do to get it to work. More importantly, I know that when you are trying to use a video along with z-index, you can get some really bad results, ones that don't work. Same with certain form fields if I remember correctly.

    I haven't really tried to do much in the way of z-index and video so can't really give you a good answer. I'm sure you've already tried this, but look on Google, I've quite often found a solution there. If I manage to find a better answer than what you've done, I'll make sure to post it.

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

Sign In or Register to comment.

January 2022
Lakes of Blood and Ash

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions