A Simple Way To Embed YouTube Videos In WordPress

For an upcoming article, I needed a simple solution for embedding youtube videos. In addition to single videos, I wanted to use a collection of  videos (playlists).

My search led me to the YouTube Player Demo page where I can assemble a ready-to-use code snippet for using into my blog articles. However, this is not the best solution because you generate in time more and more duplicate content. For the purpose of reusability you should create a Shortcode with the WordPress – Shortcode API. Before we create our WordPress Shortcode snippet, we look at the code snippet to be used as a Shortcode.

Here’s an example:

<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen>

I took the sample from the YouTube Player Demo page without changing the options. As you can see, we use an iframe to deliver the video content to Youtube’s video player. This example works only with one video ID, but what I needed were two, three and counting video IDs as a playlist.

Here’s a playlist example:

<iframe id="ytplayer" type="text/html" width="640" height="360"
frameborder="0" allowfullscreen>

That actual video player URL has been expanded with two additional parameters: playlist=pb_t5_ShQOM,ZE8ODPL2VPI and version=3. What we are particularly interested in is the playlist parameter which we append the video IDs separated by commas.

Please note: It’s important to exclude the first video ID from the comma separated playlist. Otherwise, you have one video twice in your playlist because YouTube only checks the video IDs on availability and whether they exists. Not for repeated occurrence! In some cases, it’s very important to loop also through the version URL parameter to ensure Youtube’s API functionality. 

YouTube Player Demo page – Playlist Example

Here’s now our WordPress Shortcode including all the necessary functionality:

function youtube_playlist( $atts )
                'width'  => '640',
                'height' => '360',
                'ids' => null

    if( is_null( $ids ) )
        $id_array =
                function( $id ) {
                    return trim( $id );
                explode( ',', $ids )

        $first_id = $id_array[0];
        $playlist = '';

        if( count( $id_array ) > 1 )
            array_shift( $id_array );
            $playlist = '?playlist='.implode( ',', $id_array ).'&version=3';

        return '<iframe width="'.$width.'" height="'.$height.'" src="//www.youtube.com/embed/'.$first_id.$playlist.'" frameborder="0" seamless allowfullscreen></iframe>';

add_shortcode('yplst', 'youtube_playlist');

To use the Shortcode put the code snippet above in your functions.php (Stored with each Theme in the Theme’s subdirectory in wp-content/themes) and call it with [yplst] in your post or page content. This call will execute the PHP function youtube_playlist() without any arguments, and we get the default values as arguments. In this case, that would be the height and width of the iframe and no video IDs (null). I’m okay with the height and width of the iframe and only pass the comma separated video IDs.[yplst ids="emq4rYT1nZw, thZdtxgFuHs"] After updating my page/post, I get My personal playlist.

This is a very simple how-to-use implementation of a WordPress Shortcode. Use the script as a base to expand it with other cool features.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn