After coming across a similar inquiry on Stack Overflow (), I decided to create my own solution since the original answer lacked code details.
The task at hand is to embed an HTML5 video within an iPhone image frame, like so:
The image dimensions are 300 pixels by 629 pixels. However, when viewed in Safari 6 (the targeted browser), a vertical scroll bar appears even though there's enough space to display the content. This issue persists on the provided code Fiddle as well.
What could be causing this unwanted vertical scroll bar?
Below is the code implementation:
Fiddle: http://jsfiddle.net/rZYTn/
HTML
<div class="myVideo">
<video width="253" height="447" controls autoplay>
<source src="videos/keyboard.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS
.myVideo {
background-image: url(iphone.png);
background-repeat:no-repeat;
width: 300px;
height: 629px;
padding-top: 93px;
padding-left: 25px;
overflow:hidden;
}
Observations of extra space and scroll bar presence on the Fiddle: