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.)
