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 YouTube 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&amp;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.

Tagged with:
 

15 Responses to Simple YouTube Shortcode WordPress Plugin

  1. Awesome plugin! I’m using the Minimatica theme, but I am having an issue using any CSS with the plugin. I am pretty new to HTML, CSS and WordPress, so I apologize for my lack of understanding. Where do I put the CSS coding so that I can add some styling to my videos?

    Thanks mucho!

    Brett

  2. Matthew says:

    Thanks, Brett. Glad you like it.
    You’ll have to do some self-teaching on how to effectively edit and upload custom CSS stylesheets for your site. (http://www.w3schools.com/css is an easy place to start.) You can access your theme’s CSS file(s) through the WordPress admin panel by going to Appearance – Editor. One of the files there should be style.css, and you can paste in the bit of CSS code from above. This is the clunkiest way to work with your theme files, but it works. Good luck!

  3. Frank says:

    I wouldn’t waste my time developing plugins other authors have already developed and debugged.

    If I were you I’d use the great “Youtube shortcode” plugin available in the WordPress repository for free: http://wordpress.org/extend/plugins/youtube-shortcode/

    It covers everything you’ve explained and much more, and it’s ultra-lightweight.

    You should check it out next time ;)

  4. Chris says:

    FYI- you have a typo (extra escaped double-quote in embed code) in your plugin code that causes it to crap out occasionally.

  5. Matthew says:

    Hi Chris, thanks for trying out the plugin. Right you are! Thanks for the note.

  6. Matthew says:

    Hi Frank. Thanks for the comment. At the time I built this shortcode I actually had my reasons for starting fresh. One was that I didn’t want to have to remember yet another parameter-passeing scheme for specifying the YouTube embed parameters. Since you have to learn *some* scheme to pass the parameters, I decided to just stick with the way YouTube does it, including parameters in src. Anyway, I appreciate your thoughts.

  7. Kyle Sager says:

    Hi Matthew: I just got your plugin working today in WordPress in under five minutes! I simply cut and pasted your code above into my post and then replaced the YouTube embed ID. I did change the size to 600 x 400 for a larger window. It was so easy. Thank you!

    Here is my first post with your handiwork:
    http://heliocurrent.com/seventeen-hundred-miles-five-trains/

    I am going back over to WordPress now to 5-star your plugin. best, kyle heliocurrent.com

  8. Mandy says:

    Is there a way to get the playlist to sort by the “latest video added” first? That way there is always fresh content showing up. Thx! I tried the others and def prefer the simplicity of this one.

  9. Matthew says:

    Hi Mandy. YouTube lets you manage the order of videos in a playlist. I haven’t played with Playlists in YouTube recently enough to remember how to make newest additions play first, but I imagine it’s possible. Good luck! Glad you like the plugin.

  10. Max says:

    Somehow you plugin does not allow full screen. I tried to use fs=1 option, and the button shows up but still does not work as you need to embed allowfullscreen=true somewhere within your plugin.

  11. katrina says:

    is there an easy way to display YT videos side by side within a WP post?

  12. How do you use this plug? OMG there are bunch of em none tell you how to use. Sigh

  13. Aaron says:

    I can’t seem to locate the code on the page. I see the CSS code for styling. But i don’t see the one for embed_youtube.

    Thanks,
    Aaron

  14. Lisa says:

    love the plugin. wondering if there is a way to have a random video start playing first from a specific play list. I have many visitors who come to the page every day and would like a different video to be first.

  15. Matthew says:

    Hi Lisa, glad you like it. The plugin just passes through the functionality of the YouTube player. It looks like there is a parameter you can set in the src string to change which video displays first, but it would require a little programming. Some details here:
    http://stackoverflow.com/questions/12831210/embedding-youtube-playlist-but-starting-from-random-video

    Google around for it and you might find a more elegant solution. I’ll add “playlist randomizer” to my radar for a future enhancement to the plugin…

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>