youtube5
youtube5 copied to clipboard
greneholt
Youtube5 screws up sizing of embeds
After installing Youtube5 2.6.8 in Safari 7.0.3, the Youtube embeds on my web site are the wrong size. They should all be constrained to be 16:9, but instead they're way taller than they are wide. For example: http://www.dnalounge.com/calendar/2014/06-06a.html
I don't actually understand how this is happening, but there you go.
Adding this to my CSS works around this bug, FWIW: I have to override the inlined height declaration.
.video_frame > .youtube5placeholder { height: 0 !important; }
I'm afraid your workaround is also preventing me from seeing the bug in action. Could you create a test page that demonstrates the issue?
Here's a test case. Note that with Youtube5 turned off, the video box has a 16:9 aspect ratio, and the video's preview frame resizes as the window is resized. With Youtube5 turned on, the video is too tall, and does not resize.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<STYLE>
.event_video {
margin: auto;
width: 50%;
border: 1px solid;
padding: 1em;
text-align: center;
}
.video_frame {
overflow: hidden;
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
border: 1px solid #080;
background: #000;
}
.video_embed {
position: absolute; top: 0; left: 0;
border: 0; margin: 0; padding: 0;
z-index: 1;
width: 100%;
height: 100%;
}
/* This works around a bug in the Safari Youtube5 extension, 2.6.8 */
/* .video_frame > .youtube5placeholder { height: 0 !important; } */
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="event_video">
<DIV CLASS="video_frame">
<IFRAME CLASS="video_embed" SRC="http://www.youtube.com/embed/43o3ECz3JMw"></IFRAME>
</DIV>
</DIV>
</BODY>
</HTML>