Hey there! I'm currently working on a project where I need to enclose a Youtube video in a container with automatic margins. The twist is that I want to add two images as a border on the left and right sides using the :before and :after pseudo-elements. Ideally, I want the video to be centered in the browser window, but when the window is resized, the border images should be revealed.
I have a feeling that my positioning is off, and I'm not entirely certain if using :before and :after is the best approach for this. Any suggestions on how to achieve this desired effect would be greatly appreciated.
EDIT: The left image should align its right edge with the left edge of the video, while the right image should align its left edge with the right edge of the video, creating a sort of inline-block effect. Could this potentially be done with a background image behind the entire video?
Below is the HTML code I'm currently working with:
<div class="container">
<iframe id="ytplayer" type="text/html" width="960" height="540"
src="http://www.youtube.com/embed/orosuMZsn7I?autoplay=0&origin=http://example.com"
frameborder="0"/>
</iframe>
</div>
And here's the corresponding CSS:
<style>
.container {
width: 960px;
height: 540px;
margin-left: auto;
margin-right: auto;
}
.container:before {
content: url(img/surround_02.jpg);
height: 540px;
width:211px;
position:absolute;
}
.container:after {
content: url(img/surround_03.jpg);
height: 540px;
width:218px;
position:absolute;
}
.container iframe {
position:absolute;
}
</style>