Firstly, here's a CodePen link to an example of the issue: http://codepen.io/Siyfion/full/sphCn
And the code itself: http://codepen.io/Siyfion/pen/sphCn
I have an iPad SVG image with a cut-out in the centre that I want to place a YouTube embedded video inside. The problem I have is that the image is in a Bootstrap responsive grid which means that it'll change size depending on the device's width/height.
I've tried using percentage-based offsets to position and size the embedded video within. But for whatever reason it seems that it's not working as the video shrinks in relation to the cut-out when resized, leaving a white "gap" visible.
#iPadFrame {
display: block;
position: absolute;
width: 100%;
height: auto;
}
#iPadContent {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 78.4%;
padding-top: 25px;
height: 0;
}
#iPadContent > iFrame {
position: absolute;
top: 11.4%;
left: 11.9%;
width: 80.5%;
height: 76.8%;
z-index: 1;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-10 col-xs-offset-1" id="movieSection">
<img id="iPadFrame" src="http://www.labellogiclive.com/images/af4f79b4.iPad.svg" alt="iPad Video Frame">
<div id="iPadContent">
<iframe src="http://www.youtube.com/embed/89OduOlMc0M?rel=0;showinfo=0;cc_load_policy=0;modestbranding=0;vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
