responsive | vimeo embed | letterbox issue « Support Forum | Kriesi.at

responsive | vimeo embed | letterbox issue

2 posts from 1 voice

Tags:

mniemann
Member

Hi there,

I have a problem with the responsiveness of vimeo embeded videos.

It's easy to embed the videos via iframe and for normal screens it works well.
But when I change the screen resolution e.g. while viewing on my iPhone the embeded vimeo videos get an ugly letterbox. (Black bars at the top and the bottom.)

I tried several other methods to embed the vids. But nothings seems to work.

For reference:
http://maximilian-niemann.de/main/

Would appreciate if somebody is able to help me. :)

Best regards from Germany
Max

Posted 3 months ago #
mniemann
Member

Found a solution on the web:

1. Embed the video using:

<div class="video">
<iframe src="http://player.vimeo.com/video/59653868" width="720" height="405" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

2. Add adjustment to the grid.css:
@media only screen and (max-width: 767px) {
.....
.video embed, .video object, .video iframe {width: 300px; height: 166px;}
.....

and

@media only screen and (min-width: 480px) and (max-width: 767px) {
.....
.video embed, .video object, .video iframe {width: 420px; height: 231px;}
.....

Works fine. :)

Posted 3 months ago #