NO BUG: Video element: problem with vertical videos

Bugs
1

When I insert a video element and add a vimeo video which has a vertical / portrait orientation, not horizontal / landscape (9:16 instead if 16:9), the bricks video element itself doesn’t adjust to the correct aspect ratio like it should. It shows the video correct but the element itself keeps the horizontal 16:9 aspect ratio and fills it with white space. So it’s not possible to show the video in full width of the column where it’s inserted. I had to switch to the code module and use the original vimeo embed html code as a workaround.

2

Hi,
Thanks so much for your report!

That’s not a bug as far as I can see, since the URL or video ID doesn’t contain any information about the aspect ratio of the video. If you copy the video link and open it, the vimeo player is 16/9 too, isn’t it? When copying the embed code from vimeo, this information is included.

However, you can set the aspect ratio easily:

%root%, %root% iframe {
  aspect-ratio: 9/16;
  width: 400px; /* if you dont want it to be 100% */
}

Best regards,
timmse

3

I don’t know how to apply that, since I don’t have the iframe code in my embed code:

<script src="https://fast.wistia.com/player.js" async></script><script src="https://fast.wistia.com/embed/3gp4hdwgs4.js" async type="module"></script><style>wistia-player[media-id='3gp4hdwgs4']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/3gp4hdwgs4/swatch'); display: block; filter: blur(5px); padding-top:177.78%; }</style> <wistia-player media-id="3gp4hdwgs4" aspect="0.5625"></wistia-player>

You can take a look at it here:
https://solaroberberg.vorlaender.cloud/

It’s the same with vimeo embed code and wistia embed code as well. Both embed codes show the video player correctly in 9:16 it I insert the embed code in WordPress + any other page builder, like Divi. It’s just Bricks, that’s not getting the aspect ratio.

4

Now I’m confused because your report is originally about the video element and vimeo - not wistia embeds (which still work in the code element though).

  1. Add a video element
  2. Set the source to vimeo and add your vimeo video ID or URL
  3. Click on style » custom CSS and add the following CSS:
%root%, %root% iframe {
  aspect-ratio: 9/16;
  width: 400px; /* if you dont want it to be 100% */
}

Theoretically, your 9/16 vimeo video should now be displayed as 9/16.

Sorry, I don’t understand since it’s working as expected?

5

Oh sorry, I confused my two issues. Because the video element didn’t work properly, then I used the code element instead, which unfortunately also has scaling issues. I will try it with the video element again and add the CSS code.