umbraco grid editor youtube and bootstrap - Using Umbraco 7

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

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

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Feb 11, 2015 @ 22:28

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

Copy Link

Chris 8 posts 77 karma points

Feb 12, 2015 @ 23:53

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

Copy Link

Claushingebjerg 939 posts 2574 karma points

Jun 24, 2015 @ 13:12
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?
Copy Link

Sören Deger 733 posts 2844 karma points c-trib

Jun 24, 2015 @ 13:31

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

Copy Link

Sören Deger 733 posts 2844 karma points c-trib

Jun 24, 2015 @ 13:35
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
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Umbraco Grid editor, YouTube, and Bootstrap