Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20406

    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

    #107531

    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. :)

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘responsive | vimeo embed | letterbox issue’ is closed to new replies.