November Happy Hour will be moved to Thursday December 5th.

Jeff Wallace
Aug 26, 2011
  6331
(2 votes)

Setting up the YouTube Video Playlist for the Composer 4 R2 Blocks

Based on CMS 6 R2, Composer 4 R2, and the Composer 4 R2 Blocks

Prior to the Composer 4 R2 Blocks the YouTube block in Composer was based on an edit field where the user simply added a URL. 

 

The old way:

image

 

In Composer 4 R2 this has changed to make things easier for the content contributor by allowing them to select from one or more playlists instead of typing a URL, a manual process which could be more prone to typos and errors. 

 

The new way:

image

 

 

This change has a side effect.  It means that administrators or other privileged users must do some initial set up to establish the playlist, or playlists, to pull from.  The steps do do this are documented below:

 

  • The first thing you need to do is to set up a YouTube channel, a playlist area, and one to many playlists.  I’m not an expert in creating YouTube channels so I’ll leave that to you to work through.  My expertise lies more in watching YouTube videos.  I must say, I can be pretty good at this! Winking smile  Just make sure that you understand the previously mentioned items identified in italic bold are all needed.  You can see an example screen shot of the EPiServer channel below.  Notice there is a list of playlists on the right hand side of the page.  One to many videos exist within each playlist.

image

  • Once you have the playlist (s) set up you can select one and obtain the URL that is needed for the EPiServer YouTube video Composer block.

image

  • Navigate to the CMS Admin Mode.
  • Select the “Page Type” tab.
  • Select “Edit Custom Property Types” link.

image

  • You should find a “YouTube Picker Property” available.  This is the property that the YouTube Composer block uses.
  • Select the “YouTube Picker Property” link.

image

  • From here you can edit the existing setting or add one to many others.  Each setting is designed to point to one YouTube playlist.

image

  • To add a new setting select the “Add Setting” button.
  • Give the setting a name, description, and add the YouTube URL that you took note of earlier based on the playlist you want to expose to content contributors.

image

  • Select the “Save” button.
  • You should now see your new setting available.

image

  • You can set any one of these settings as the default.  This effectively makes it just that,  the default that is used when someone uses this Property.  Typically this would be the channel for your organization most commonly used by your content contributors.  In my example I’ll leave the previously existing default.
  • Select the “Save” button.
  • Composer blocks are based on EPiServer pages.  Since you already selected the Admin~Page Type tab in Admin Mode, navigate to and select the “YouTube video” Page Type.

image

  • Select the “YouTubeLink” Property link.

image

  • As of the last few releases of EPiServer, many Properties have custom settings that you can configure.  In this case, this also holds true for our “YouTubeLink” Property.  Select the “Custom Settings” tab.

image

  • From here you can either “Manage global settings” to make some global changes for all users of this Property.  You can also simply edit the custom settings for this page type and manually enter the URL.  In our case we already set up a global setting for our new channel.  This allows us to simply select it from the “Use global settings” drop down.  Select the setting you added previously in the steps above.

image

  • Select the “Save” button.
  • Navigate to Edit Mode and create a new Composer-based Page Type adding a YouTube block to the page.  Please refer to the Composer documentation for more details on how to do this.
  • Select “Edit” on the YouTube block or double click it to enter edit mode for the module.
  • You should now see the videos associated with your new channel!

image

 

Some people may like the previous method of entering a direct URL in the Composer block.  However, for others who want the simplified content contributor experience, and to limit what videos they can add, this is an excellent addition.  The good news is that you have access to the code for both on EPiServer World for the Composer Download area.  So, you can use either or perhaps even build your own customization which provides a mix of both options.

 

I hope this helps!

Aug 26, 2011

Comments

Aug 26, 2011 06:11 PM

Thanks - this looks great!

tym.lawrence@netcat.com.au
tym.lawrence@netcat.com.au Nov 7, 2011 12:57 AM

Hey Jeff.

Thanks for doing this blog entry. I found it really helpful. However, I've noticed that the the URL which you now get from YouTube seems to be different from the one that you show being used. This means that the link you copy from YouTube doesn’t immediately work in a CMS 6 R2 site with Composer. You have to change it.

I've posted a follow up article at http://world.episerver.com/Blogs/Tym-at-Netcat/Dates/2011/11/Getting-YouTube-Video-Composer-Block-to-work1/ in case you're interested.

tym.lawrence@netcat.com.au
tym.lawrence@netcat.com.au Feb 1, 2012 05:04 AM

Hi Jeff,

Thought it might be worth noting that the new YouTube UI design makes it hard get old style URLs for use in EpiServer CMS. In the older YouTube UI design, it was possible to get URLS in the form of http://www.youtube.com/user/NetcatAustralia#grid/user/4A29EC0F1A12A829

This is the form needed for use when displaying YouTube videos in EPiServer CMS - as noted at http://world.episerver.com/Blogs/Tym-at-Netcat/Dates/2011/11/Getting-YouTube-Video-Composer-Block-to-work1/

Not sure what will happen when all channels will be updated to the new design on March 7th 2012. I'll also send a note to EpiServer about this.

Tym

Please login to comment.
Latest blogs
Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog