Skip to main content
hellopaul4
hellopaul4
Inspiring
March 9, 2023
Question

Adobe Portfolio: responsive video size?

  • March 9, 2023
  • 3 replies
  • 11182 views

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

    3 replies

    M
    melaniem83831331
    Participant
    September 19, 2023

    Hi! I figured it out! you need to change the top numbers "560" and "315" in my case to the dimensions you want your video to be in


    <iframe width="560" height="315" src="https://www.youtube.com/embed/2PcuALG6fzo?si=VWJcfgMU0t_ew8N3&amp;controls=0&amp;start=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

    hellopaul4
    hellopaul4Author
    Inspiring
    September 19, 2023

    Hmmm....but what if the user's screen is, say 3840 wide x 2160 high? Your 560x315 video would be tiny. My issue is that I'd like the video to fill the screen, without being cropped. By default, the "100% width" setting makes the video fill the user's screen width, and the height of the video is determined by the video's aspect ratio. So if they're watching a video that's, say, 1080x1920 (portrait) but they're holding their phone in landscape mode, the video fills the width of the screen and the lower portion of the video is cropped off. Or even if they're watching a portrait video on a desktop PC (which is almost always landscape) they might encounter the same problem.

    Look at this example of mine: https://paulroper.com/jameson-whiskey
    It's a 9:16 video, which scales to 100% width. If you watch it on a landscape screen, I'd like it to scale to fit 100% height, with white space each side of the video. But that does not happen. Hence me coming here for a solution...

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 19, 2023

    Click or tap the FULLSCREEN icon (far right-side of video controls).

     

     

    Video aspect ratio is proportionally correct for this display.

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 10, 2023

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

     

    Nancy O'Shea— Product User & Community Expert
    RV_rax
    RV_rax
    Participant
    September 7, 2023

    @hellopaul4 @Nancy OShea 

    Hi Everyone!

    I had the same issue with the heigh at 100%. I read Nancy's reply about how the height cannot be 100% and it got me thinking! So I typed in 400% on the embed code height and that seems to be working.  Hope this help. 

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      September 7, 2023
      quote

      I typed in 400% on the embed code height and that seems to be working.  Hope this help. 

      By @RV_rax

      =============

      Test it in all browsers and web devices before you commit. 

      % height on <iframe> is NOT VALID code.

      https://www.w3schools.com/tags/att_iframe_height.asp

       

       

       

       

      Nancy O'Shea— Product User & Community Expert
      Neelamk
      Neelamk
      Legend
      March 9, 2023

      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
      hellopaul4Author
      Inspiring
      March 9, 2023

      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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices