Jeff Wallace
Aug 26, 2011
  6236
(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
Opti ID overview

Opti ID allows you to log in once and switch between Optimizely products using Okta, Entra ID, or a local account. You can also manage all your use...

K Khan | Jul 26, 2024

Getting Started with Optimizely SaaS using Next.js Starter App - Extend a component - Part 3

This is the final part of our Optimizely SaaS CMS proof-of-concept (POC) blog series. In this post, we'll dive into extending a component within th...

Raghavendra Murthy | Jul 23, 2024 | Syndicated blog

Optimizely Graph – Faceting with Geta Categories

Overview As Optimizely Graph (and Content Cloud SaaS) makes its global debut, it is known that there are going to be some bugs and quirks. One of t...

Eric Markson | Jul 22, 2024 | Syndicated blog

Integration Bynder (DAM) with Optimizely

Bynder is a comprehensive digital asset management (DAM) platform that enables businesses to efficiently manage, store, organize, and share their...

Sanjay Kumar | Jul 22, 2024

Frontend Hosting for SaaS CMS Solutions

Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

Minesh Shah (Netcel) | Jul 20, 2024

Optimizely London Dev Meetup 11th July 2024

On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

Scott Reed | Jul 19, 2024