Copied to clipboard

Flag this post as spam?

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


  • Chris 8 posts 77 karma points
    Feb 11, 2015 @ 15:46
    Chris
    0

    Umbraco Grid editor, YouTube, and Bootstrap

    Hi,

    I would like to render links to YouTube videos in a way that bootstrap v3 likes: http://getbootstrap.com/components/#responsive-embed

    I was hopeful that I could just update the render partial of the embed editor for the grid: \AppPlugins\Grid\Editors\Render\embedvideowrapper.cshtml

    But this is only wrapping the iframe with a div and at best this only does half of what I'm looking for - as I want to apply CSS classes directly to the iframe as well.

    Does anyone have any thoughts on the best approach to modifying this partial? Or another entry point to modify.

    Thanks Chris

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Feb 11, 2015 @ 22:28
    Dennis Aaen
    100

    Hi Chris,

    Perhaps you could use the package called responsive youtube macro for grid to solve your needs. https://our.umbraco.org/projects/website-utilities/responsive-youtube-macro-for-grid

    Hope this helps,

    /Dennis

  • Chris 8 posts 77 karma points
    Feb 12, 2015 @ 23:53
    Chris
    0

    Hi Dennis

    Thanks for the pointer. I used Michael's YouTube package and change partial to suit my Bootstrap v3 needs.

    Here is the code for the partial should any follow in my footsteps:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    
    @if (Model.MacroParameters["ytVideoLink"] != null)
    {
      var fullLink = Model.MacroParameters["ytVideoLink"].ToString();
      var youTubeId = fullLink.Split('=').Last();
    
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" type="text/html" src="http://www.youtube.com/embed/@youTubeId?rel=0&showinfo=0" allowfullscreen="true"></iframe>
      </div>
    }
    

    Note: I've added URL parameters to hide the related videos and video title. The parameters are defined here:

    https://developers.google.com/youtube/player_parameters

  • Claushingebjerg 936 posts 2571 karma points
    Jun 24, 2015 @ 13:12
    Claushingebjerg
    0

    im trying to do the same as above, but:

    1. \AppPlugins\Grid\Editors\Render\embedvideowrapper.cshtml doesn't exist in 7.2.6 as far as i can see.
    2. The "Responsive youtube macro for grid" package doesn't exsist anymore.

    Any pointers how to do this in 7.2.6?

  • Sören Deger 733 posts 2844 karma points c-trib
    Jun 24, 2015 @ 13:31
    Sören Deger
    0

    Hi,

    I have do this thing yesterday. You can edit the embed.cshtml file in /views/Partials/Grid/Editors/ and insert a div with a class around the @Html.Raw(Model.value):

    @model dynamic
    @using Umbraco.Web.Templates
    <div class="videoWrapper">
        @Html.Raw(Model.value)
    </div>
    

    Then I have create a new css file "customgrid.css" and load this file dynamically with javascript. For dynamically loading I have added this code in the /views/Partials/Grid/Editors/Base.cshtml:

    <script type="text/javascript">
    
        function loadCSS(filename) {
    
            var file = document.createElement("link")
            file.setAttribute("rel", "stylesheet")
            file.setAttribute("type", "text/css")
            file.setAttribute("href", filename)
    
            if (typeof file !== "undefined")
                document.getElementsByTagName("head")[0].appendChild(file)
    
        }
    
        var styles = document.styleSheets;
        var cssExist = false;
    
        if (styles.length != 0) {
    
            for (var i = 0; i < styles.length; i++) {
    
                 if (styles[i].href != null && styles[i].href.match("/css/customgrid.css")) {
                    if (styles[i].cssRules != null && styles[i].cssRules.length == 0) {
                        // request for css file failed, make modification
                        break;
                    } else {
                        cssExist = true;
                    }
                }
            }
            if(cssExist==false)
            {
                loadCSS("/css/customgrid.css");
            }
        } else {
            loadCSS("/css/customgrid.css");
        }
    
    </script>
    

    Maybe there is not the best solution, but it should work.

    Hope this helps?

    Best, Sören

  • Sören Deger 733 posts 2844 karma points c-trib
    Jun 24, 2015 @ 13:35
    Sören Deger
    0

    I was too fast....

    Here is the customgrid.css:

    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }
    
    .container .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    

    Maybe you must only add the customgrid.css in your template and not in the base.cshtml. Try it out. In my case I have a lot of other styles in the customgrid.css for changing the default style of grid editor in backend.

    Best, Sören

Please Sign in or register to post replies

Write your reply to:

Draft