We wanted the video to be fairly prominent on the page so I embedded it in the RTE using the Embed tool and changed the size that way.
This is fine, but when you view the page on a mobile device or smaller screen, the video does not dynamically reduce in size to accommodate the smaller screen size. It's using Bootstrap, so I'd normally use media queries to define the settings for each device but I can't find where to add this?
At the moment the RTE has positioned the video within an iframe:
Okay, actually, I figured it out. Found the "Source Code" button on the RTE (I'm new to Umbraco) and could then see the actual code. Added the relavent Bootstrap classes and enclosed the video in a div with .embed-responsive..
This will work fine but may get over written when you go to upgrade your umbraco instance. Instead how about write an extension to append the class onto the embed.
Highly recommed paul seal you tube series on building a website with umbraco 8. He writes a HtmlExtensions for images that appends the img-fluid class onto images in the grid - https://youtu.be/PmAYWmH9BhE which you could easily adapt.
Change size of embedded YouTube video
I've embedded a video from YouTube onto our site:
https://www.voice-global.org/about-us/
We wanted the video to be fairly prominent on the page so I embedded it in the RTE using the Embed tool and changed the size that way.
This is fine, but when you view the page on a mobile device or smaller screen, the video does not dynamically reduce in size to accommodate the smaller screen size. It's using Bootstrap, so I'd normally use media queries to define the settings for each device but I can't find where to add this?
At the moment the RTE has positioned the video within an iframe:
Thanks for your help!
John
Okay, actually, I figured it out. Found the "Source Code" button on the RTE (I'm new to Umbraco) and could then see the actual code. Added the relavent Bootstrap classes and enclosed the video in a
div
with.embed-responsive
..Hi John,
I'm also having a similar problem. Could you send an example of how you fixed this, please?
Thanks so much, Safae
This will work fine but may get over written when you go to upgrade your umbraco instance. Instead how about write an extension to append the class onto the embed.
Highly recommed paul seal you tube series on building a website with umbraco 8. He writes a HtmlExtensions for images that appends the img-fluid class onto images in the grid - https://youtu.be/PmAYWmH9BhE which you could easily adapt.
is working on a reply...