WordPress.org

Support

Support » How-To and Troubleshooting » Image Behind Emedded Youtube Video? How?

Image Behind Emedded Youtube Video? How?

  • 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

Viewing 2 replies - 1 through 2 (of 2 total)
  • 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.)

    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image Behind Emedded Youtube Video? How?’ is closed to new replies.
Skip to toolbar