Simple YouTube Shortcode WordPress Plugin

Simple Youtube Shortcode is a WordPress plugin that provides a shortcode to embed YouTube videos or playlists, with basic options for sizing the player and styling with CSS.

I needed a shortcode to simplify the task of embedding a YouTube video player into a client’s WordPress website, allowing both single videos or playlists, with options for resizing and styling the player. Simple Youtube Shortcode is the result.

Usage:

The shortcode’s name is embed_youtube and it takes these parameters:

• src – The location of the YouTube video
• width – In pixels or percentages. Default = 100%.
• height – In pixels or percentages. Default = 400px.
• class – A CSS class name. Default = “”.
• id – A CSS id. Default = “”.

To use the shortcode, first find a video on YouTube that you want to embed. In YouTube click Share and Embed to reveal the iframe code for the video. All you need from that is the src bit.

Embedding a single YouTube video with CSS styling

For example, here’s the embed code for a video:
<iframe width="420" height="315" src="http://www.youtube.com/embed/4r7wHMg5Yjg" frameborder="0" allowfullscreen></iframe>
Given YouTube’s iframe code, here’s the fullest usage of the Simple YoluTube Shortcode:
[embed_youtube src="http://www.youtube.com/embed/4r7wHMg5Yjg"  width="300" height="200" class="youtube_styleme" id="thisid"]


Note that the CSS for this website provides styling for class “youtube_styleme”. For example, here is the CSS used for this site:

/* Style Youtube boxes for simple-youtube-shortcode */
.youtube_styleme {
padding:10px 10px 10px 10px;
border:1px solid #DDDDDD;
box-shadow:5px 5px 10px #CCCCCC;
border-radius:10px;
margin-bottom: 10px;
}


Embedding a YouTube playlist

Here’s the iframe code for a Playlist:

<iframe width="560" height="315" src="http://www.youtube.com/embed/videoseries?list=PLBED6EEEFDDD630FA&amp;hl=en_US" frameborder="0" allowfullscreen></iframe>

And here’s the shortcode to display it:
[embed_youtube src="http://www.youtube.com/embed/videoseries?list=PLBED6EEEFDDD630FA&hl=en_US"  width="60%" ]


Passing Parameters to YouTube to Alter Player Behavior

You can pass arguments to the YouTube player as part of src to adjust how the player behaves. My favorite string to add to src is:
?modestbranding=1&autohide=1&showinfo=0&rel=0&start=XXX .

If you’re adding to the end of a playlist’s src, start with “&” instead of “?”.

Here’s what those parameters mean:

• modestbranding=1 – hide the YouTube logo while the video is playing
• autohide=1 – hide the playback controls until the watcher wiggles their mouse
• showinfo=0 - don’t show the video name on top of the video (which almost never formats well)
• rel=0 – don’t show random related video suggestions at the end
• start=180 – Start playing 180 seconds into the video.

Let’s try it out, starting the video at “Honey Badger don’t care!”

[embed_youtube src="http://www.youtube.com/embed/4r7wHMg5Yjg?modestbranding=1&autohide=1&showinfo=0&rel=0&start=35"  class="youtube_styleme"]

Will display:

If you find this plugin valuable, please consider donating to Heifer International.