FEATURE REQUEST: Aspect ratio container width/height
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.
- Hopki
- Gnome
- Posts: 13029
- 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:
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,
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:
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 155 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/
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/
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
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/
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
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/
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.
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;
}