Embedded YouTube Video Management

Need to design a site that has easily managed embedded YouTube videos? Here's a quick HowTo for doing this with MagicEdit!

Here's the code we'll use:

<div cl_visible="=CLManager.activeSession.account:isAdmin||$myVideo">
  <div class="instructions" cl_visible="=CLManager.activeSession.account:isAdmin">
    <p>To manage this video, do the following:</p>
      <li>Find the video you want to embed on YouTube and click the "Embed" button</li>
      <li>Type "550" (no quotes) in the "Width:" field under "Custom", then copy the embed code</li>
      <li>Click the "edit" button below, then paste the embed code, replacing any existing code</li>
      <li>Don't forget to click "submit" when you're done.</li>
  <magicedit me_plain me_name="myVideo"></magicedit>

As you can see, we're using the cl_visible attribute on some elements. This allows us to show and hide things based on various conditions, including whether there is actually a video embedded or if a site administrator is logged in.

The first cl_visible checks if an administrator is currently logged in, or if the contents of myVideo exist. If either of these conditions is met, the div will be shown, otherwise it will be removed.

Now, we want to show some instructions to the person managing the site, so the next div contains some basic instructions. Often times you want the width of the video to fit with your site design, so this gives you an opportunity to show some documentation reflecting specific information the content manager needs to know (in this case, the width). Setting cl_visible="=CLManager.activeSession.account:isAdmin" means that this element will always be displayed when the administrator is logged in.

Finally, we have the actual MagicEdit region that contains the embed code. We invoke the plain text editor here, and make sure we name the region using me_name="myVideo". This allows the cl_visible in the parent div to show and hide appropriately.

The Results

Since we didn't put any placeholder embed code in to start with, and we're hiding the whole block of HTML if there is nothing in the "myVideo" region, there's nothing to see if the site visitor is not logged in. However, if a site admin logs in, they will see the following instructions and edit button on the page:

Following the instructions now results in something that looks like this (still logged in here):

Now, site visitors will see just the video (check this by simply logging out):

And because this video is fun, here it is in all its hamster glory. The MagicEdit version of the song goes something like, "You can edit this, or you can edit that..."