Responsive video?

  • Resolved radstt85

    (@radstt85)


    4 years, 6 months ago

    Hi,

    I have used short code and block as instructed but by setting height and width, the iframe is not responsive. For example, I tried setting width 1120px and height blank. At full screen on desktop the video looks as expected. When scaled down to tablet or mobile view though the iframe height is stuck at 630px.

    When using native Vimeo block all scaling responds as expected.

    Is there a way to make the embed fully responsive and remove the white space on scaling down? I also tried inspecting the element to edit the CSS but could not seem to find the element causing the issue.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Ruben Garcia

    (@rubengc)

    Hi @radstt85

    You can make it responsive with the following CSS:

    .gamipress-vimeo-video iframe {
    width: 100% !important;
}

    Hope it helps

    Best regards

    Thread Starter radstt85

    (@radstt85)

    @rubengc That didn’t quite work as it still left the top and bottom whitespace on smaller screens. It did point me to the right CSS class though!

    Here’s what I did that worked perfectly. Sharing in case anyone else ever needs it.

    .gamipress-vimeo-video {
  position: relative; 
  padding-bottom: 56.25%;     
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
}

.gamipress-vimeo-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
    Plugin Author Ruben Garcia

    (@rubengc)

    Hi @radstt85

    The CSS code I shared is to make the video width responsive

    Anyway, thanks for share you CSS with everyone who wants the same workflow as you want

    Best regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive video?’ is closed to new replies.