Jeff Wallace
Aug 26, 2011
  6305
(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
Multiple Anonymous Carts created from external Head front fetching custom Api

Scenario and Problem Working in a custom headless architecture where a NextJs application hosted in Vercel consumes a custom API built in a...

David Ortiz | Oct 11, 2024

Content Search with Optimizely Graph

Optimizely Graph lets you fetch content and sync data from other Optimizely products. For content search, this lets you create custom search tools...

Dileep D | Oct 9, 2024 | Syndicated blog

Omnichannel Analytics Simplified – Optimizely Acquires Netspring

Recently, the news broke that Optimizely acquired Netspring, a warehouse-native analytics platform. I’ll admit, I hadn’t heard of Netspring before,...

Alex Harris - Perficient | Oct 9, 2024 | Syndicated blog

Problem with language file localization after upgrading to Optimizely CMS 12

Avoid common problems with xml file localization when upgrading from Optimizely CMS 11 to CMS 12.

Tomas Hensrud Gulla | Oct 9, 2024 | Syndicated blog