FEATURE REQUEST: Aspect ratio container width/height

Q&A about the latest versions
Post Reply
LProbert
Posts: 92
Joined: Thu May 21, 2020 11:53 am

Trying to code a Vimeo popup embed iframe that keeps itself as 90% of the height but with a flexible width to keep the 16:9 aspect ratio. it is very tricky within the skin editor.to do this. Adding CSS is overridden by the editors' width and height values.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
For the YouTube or Vimeo Component, in the skins tree select the container "video_popup_youtube" or video_popup_vimeo, set the size to pixels, then set the size to 560 x 315px.
Then set the size to CSS and set:

1.png
1.png (34.32 KiB) Viewed 2839 times

This sets the aspect ratio to 16:9 of the container, the video element is set to 100% of this so will just follow the size.
You can now move the close button to the top corner of the container and it will stay in place as the size changes.
Please see the attached project.
Regards,
Attachments
project.zip
(17.37 KiB) Downloaded 145 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
drbob
Posts: 31
Joined: Tue Oct 14, 2014 12:54 pm

Thanks for this. Did not know "VW" as a CSS unit. I have similar problem trying to get floor plans to maintain aspect ratio. Perhaps I should take a couple of days to update my knowledge of CSS.
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

I have a tutorial called Maintaining the 'Maintaining the Aspect Ratio of an iFrame' on my website at https://tonyredhead.com/pano2vr-little- ... tio-iframe

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Hi Tony,

Did review your web site "Maintaining the Aspect Ratio of an iFrame" tutorial. Your work is exceptional and very useful.

/s/
Dave still at 360Texas.com
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Dave,

Oh no! Not quite sure what's going on there as I've had a number of donations from the U.S.

Thank you for your consideration and I appreciate the comments. If you want to pursue the donation further perhaps via Paypal my email is tony@tonyredhead.com

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
LProbert
Posts: 92
Joined: Thu May 21, 2020 11:53 am

Thank you for all the responses on this. Just got back from holiday and now need to fix this bug urgently!
The CSS setting for keeping the aspect ratio using CSS values is great, but it doesn't solve my issue with the height being larger than the window when it is scaling based on the width. Ideally, I need the width to start reducing to keep the height in and vice versa. I've tried setting some CSS rules to override the properties set by the skin and using this article as a guideline: https://blog.logrocket.com/a-closer-loo ... ect-ratio/

Colleague had some success with this but I couldn't get it to work.

Code: Select all

.ggskin.ggskin_container {
    height: unset !important;
    aspect-ratio: 16/9 !important;
}
Post Reply