Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • John Dawson 24 posts 135 karma points
    Sep 06, 2019 @ 08:38
    John Dawson
    0

    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:

    <iframe width="853" height="480" src="https://www.youtube.com/embed/zIvm5v20TzU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    

    Thanks for your help!

    John

  • John Dawson 24 posts 135 karma points
    Sep 06, 2019 @ 08:51
    John Dawson
    100

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

  • safae 1 post 71 karma points
    May 15, 2020 @ 11:56
    safae
    0

    Hi John,

    I'm also having a similar problem. Could you send an example of how you fixed this, please?

    Thanks so much, Safae

  • lori ryan 239 posts 573 karma points
    May 15, 2020 @ 12:50
    lori ryan
    2

    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.

     public static class HtmlExtensions
        {
            public static IHtmlString GetGridHtml(this HtmlHelper html, IPublishedContent contentItem, string framework, string propertyAlias, bool fluidImages)
            {
                if (fluidImages )
                {  
                    return html.Raw(html.GetGridHtml(contentItem, framework, propertyAlias).ToString().Replace("<img ", "<img class='img-fluid' ");
                }
    
    
                else
                {
                    return html.GetGridHtml(contentItem, propertyAlias, framework);
                }
            }
        }
    
Please Sign in or register to post replies

Write your reply to:

Draft