Adobe Portfolio: responsive video size?

[hellopaul4]

Hello,

I have embedded some Vimeo videos on my Portfolio site, but I cannot find a way to make the videos fit to the page height. The embed code from Vimeo is:

<iframe src="https://player.vimeo.com/video/........" width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

I've tried changing the width and height to 100%:

<iframe src="https://player.vimeo.com/video/....." width="100%" height="100%" frameborder="0" allow="autoplay; picture-in-picture" allowfullscreen></iframe>

...but this just makes the whole frame in Portfolio really tiny, and not responsive at all.

I'm guessing that the issue is within Portfolio, not Vimoe (and its embed code). I assuem the embed code just tells Portfolio to fill the iframe with the video, but I need to tell Portfolio to size the iframe to the height of the screen. Is there any way to do this?

Here are a couple of examples on my site:

https://paulroper.com/reel

and

https://paulroper.com/social-media

...you'll see that the videos are only responsive to the width of the screen, not the height, so the lower portion of the videos often get cut off.

Thanks in advance for nay help or suggestions!

~ Paul

[Neelamk]

Hi Paul,

Welcome to our Community Forum. Thank you for writing to us. To help you with video-related queries in Portfolio, we have an article explaining it, Please refer to below:

https://help.myportfolio.com/hc/en-us/articles/360036483413-Video-module

Please let us know if this helps. We are here to help you.

Regards,

Neelam

[hellopaul4]

Thanks for your suggestion - I just tried using the Video Module, but it still does not scale the video to fit to the screen (vertically) - i.e. the lower section of the video is cropped off the screen if the viewer's screen is not sized larger than the video's height - just like embedding a Vimeo video. This is especially noticeable when viewing a portrait video (eg. 1080x1920) on a landscape (eg. desktop monitor) screen.

[Nancy OShea]

<iframe> cannot be 100% height.  It's meaningless to browsers.

Only the width can be 100%. 

Find a sweet spot length in pixels that fits most screen sizes.  Unfortunately that's the best you can do with embedded <iframes>.  Adobe Portfolio doesn't allow us to work directly with CSS or JavaScript code that would force <iframes> to behave responsively.  Sorry.

Another option, transcode your video to same aspect ratio but smaller resolution (height x width) for better viewing on mobile devices.

https://vimeo.com/blog/post/how-to-resize-video/

Hope that helps.