Videolizer

An Umbraco Data Type and Grid Property Editor that allows you to search and pick from YouTube and Vimeo videos.

It can also be configured to search and pick from your own YouTube/Vimeo video feeds.

Installation

Install the package and a new datatype called 'Videolizer' will be added.

Also avaliable via Nuget: Install-Package DigitalMomentum.Videolizer

Features

• Supports both YouTube and Vimeo Videos
• Add videos by pasting the VideoURL
• Seach your YouTube Channel OR Vimeo feed to select your videos
• Easy embedding into the templates OR access to properties to customise the video yourself
• Video Preview for the content editors
• Strongly Typed models for Models Builder
• Works with nested content

How to use

Document Types

You will need to add the Videolizer data type to one or more of your document types so that the editors can paste in the video URLs.

In your Views

There are two ways to use the values from the property editor in the views.

@(Model.Content.GetPropertyValue<Videolizer.VideolizerVideo>("video").GetSimpleEmbed("600", "300"))

or like this

@{ var video = Model.Content.GetPropertyValue<Videolizer.VideolizerVideo>("video"); 
@video.embedUrl
    }

Grid Editor

A YouTube/Vimeo option will now appear as a selection in your grid editor. It will allow youto paste in a URL to Youtube / Vimeo video and it will display a preview video as well as alloing to select options for:

• Auto Play
• Loop
• Show Title (Vimeo Only)
• Show Byline (Vimeo Only)
• Start time (YouTube Only)
• Display Related Videos (YouTube Only)
• Show/Hide Controls (YouTube Only)

Rendering in the template

The new video should appear on the site without any need for code.

For us to make the vide's responsive by default, we have added some inline styles in the partial view.

We highly reccomend moving these styles to your stylesheet or using the bootstrap responsive framework. You can find the partial view under /Views/Partials/Grid/Editors/Videolizer.cshtml

We didnt like doing this, but want to make the video responsive for the grid layout out of the box.