User Defined Tags for YouTube and Vimeo Embeds

Posted on 19th June 2013 by

Easy as it may be to grab the embed code for a YouTube or Vimeo video, it's not always fun trying to wrestle it into your favourite CMS' wysiwyg editor. It's a piece of cake for CMSMS users if you simply create a couple of UDT's to do the leg work.

Using this user defined tag:

{YouTube id="geMmsM43N4Y" width="480" height="360"}

...instead of this wysywyg-chompable slab of code:

<iframe width="480" height="360" src="//www.youtube.com/embed/geMmsM43N4Y" frameborder="0" allowfullscreen></iframe>

...can make for much simpler YouTube video embedding in CMS Made Simple.

Gimme the code already!

YouTube Embed UDT

echo '<iframe width="'.$params['width'].'" height="'.$params['height'].'" src="http://www.youtube.com/embed/'.$params['id'].'" frameborder="0" allowFullScreen></iframe>';

Vimeo Embed UDT

echo '<iframe src="http://player.vimeo.com/video/'.$params['id'].'?title=0&amp;byline=0&amp;portrait=0" width="'.$params['width'].'" height="'.$params['height'].'" frameborder="0"></iframe>';

Bonus points for those brave enough to trust that Vimeo or YouTube won't change their video ID structures any time soon:

YouTube or Vimeo Embed UDT

if (!ctype_digit($params['id')) {
    echo '<iframe width="'.$params['width'].'" height="'.$params['height'].'" src="http://www.youtube.com/embed/'.$params['id'].'" frameborder="0" allowFullScreen></iframe>';
} else {
    echo '<iframe src="http://player.vimeo.com/video/'.$params['id'].'?title=0&amp;byline=0&amp;portrait=0" width="'.$params['width'].'" height="'.$params['height'].'" frameborder="0"></iframe>';
}

Of course there are numerous other paramaters that can be added, such as privacy-enhanced mode for YouTube and button colouring for Vimeo but this is only intended to provide a fairly lean tag which you can expand upon to meet your own needs.

We'll be adding another useful UDT for embedding Soundcloud tracks in the near future, and if we can think of any other useful applications worth a user defined tag of their own then we'll be on the case!