WordPress.org

Ready to get started?Download WordPress

Forums

Image Behind Emedded Youtube Video? How? (3 posts)

  1. awa202
    Member
    Posted 3 years ago #

    Hey guys,

    I simply want to put an embedded youtube video over the top of an image of a wooden picture frame. How can I do this? Im guessing I could set the image as a background but if thats the way to do it, how do I position it down the page?

    cheers

  2. Triplanetary
    Member
    Posted 3 years ago #

    What I would suggest is to put the YouTube embed inside a <div>, give the <div> the background you want, and then set a padding property for the <div> so that the background is visible around the edges of the YouTube embed. Your HTML might look something like this:

    <div class="youtube">
    <YouTube stuff>
    </div>

    And then you can style it with CSS thusly:

    div.youtube {
    background: url('location/picture.png')
    padding: 15px;
    }

    The padding will add 15px of blank space to each of the div's four sides. The div's height will thus be the height of the YouTube embed, plus 30 pixels. You'll need to give the div a "width" or "max-width" property to keep it from stretching to fill the entire width available to it - set it to the width of the YouTube embed, plus 30 px again.

    But what I'm driving at is that, with this height and width in mind, you can create a background image with the same dimensions as the div. (15 pixels is just an example; you can set it to whatever you want, of course.)

  3. awa202
    Member
    Posted 3 years ago #

    hey mate thanks for the reply,

    when styling with CSS do i just add the second part of code to the themes stylesheet? just paste it anywhere or?

    cheers

Topic Closed

This topic has been closed to new replies.

About this Topic