I have a site with YT video. IT is 500px wide. MY site is resizing fine on the phone with the exception of the video. Any ideas how to implement scaling ?
I use standard CASIOPEIA template.
I use standard CASIOPEIA template.
#113544 Scaling Video
Posted in ‘Editor’
This is a public ticket
Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.
Latest post by dolmenhir on Monday, 19 February 2024 09:43 GMT
Sunday, 09 April 2023 02:05 BST
aklisiewicz
Monday, 10 April 2023 10:28 BST
Ryan
Youtube video require extra HTML and css to ensure responsive scaling.
I have created this Joomla plugin to assist with this - https://github.com/widgetfactory/wf_responsive_widgets
I have created this Joomla plugin to assist with this - https://github.com/widgetfactory/wf_responsive_widgets
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Friday, 09 February 2024 09:14 GMT
dupinsan
Thanks for this plugin.
Is it compatible with Joomla 5?
Is it compatible with Joomla 5?
Friday, 09 February 2024 10:11 GMT
Ryan
Is it compatible with Joomla 5?
Yes, this is compatible with Joomla 5 provided the "Behaviour - Backward Compatibility" plugin is enabled (which it is by default).
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Saturday, 17 February 2024 11:33 GMT
dolmenhir
Hi,
You can make your video responsive simply by editing the style in the advanced tab of the Media Manager.
Add this style property "max-width:100%;"
You can make your video responsive simply by editing the style in the advanced tab of the Media Manager.
Add this style property "max-width:100%;"
Saturday, 17 February 2024 12:18 GMT
Ryan
The original poster is referring to Youtube video, which uses an iframe and cannot be made responsive with a max-width:100% style.
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Monday, 19 February 2024 08:41 GMT
dolmenhir
[quotePost id="116207"]The original poster is referring to Youtube video, which uses an iframe and cannot be made responsive with a max-width:100% style.[/quotePost]
Adding this style property "max-width:100%;" works even for youtube videos because the style properties from the media manager are added into the iframe tag.
Here an example : https://www.cedre.org/le-cedre/les-videos
Adding this style property "max-width:100%;" works even for youtube videos because the style properties from the media manager are added into the iframe tag.
Here an example : https://www.cedre.org/le-cedre/les-videos
Monday, 19 February 2024 09:29 GMT
Ryan
Here an example : https://www.cedre.org/le-cedre/les-videos
Your videos don't actually scale responsively. Responsive scaling would result in them keeping their aspect ratio (width and height proportional to the original). For iframes this requires additional css and HTML markup, which is what the Responsive Widgets plugin does. You can read about it here - https://css-tricks.com/responsive-iframes/
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Monday, 19 February 2024 09:43 GMT
dolmenhir
[quotePost id="116224"]Your videos don't actually scale responsively. Responsive scaling would result in them keeping their aspect ratio (width and height proportional to the original). For iframes this requires additional css and HTML markup, which is what the Responsive Widgets plugin does. You can read about it here -
Edited by dolmenhir on 2024-02-19 09:44 GMT