WP: Lesson 4 – YouTube

Previous | Next

Embed Youtube Video

Embedding a YouTube videos are a great way to enhance your website. Here’s how you can easily use them in your posts and pages, as well as in your widget areas and in comments you leave.

Adding YouTube videos to WordPress

  1. Find the video you wish to embed on YouTube
    (
    assuming you don’t already have the video address)
  2. Click the Share link (under the video)
  3. Under ‘Share this video’, copy the video address to the clipboard.
    Notice the tick box option to start the video at a particular position. Press Ctrl + C for copy the URL.

Edit your URL to basic Youtube shortcode:

https://youtu.be/9GwrmbC94Es

to

[youtube https://youtu.be/9GwrmbC94Es ]

Default Embed

Shortcode

Here is an example of shortcode options:

[youtube https://youtu.be/_R0Ix90hFu8?list=PLe55PJ0ZiN_M0EqP4EyFlFn9bXB60RDeh&autoplay=1&w=320&controls=0&rel=0&showinfo=0&theme=light&align=right&loop=1]

URL Option

https://youtu.be/0gPd9soZEU4?modestbranding=1;controls=0;showinfo=0;rel=0;fs=1

JetPack Youtube Shortcode

These are the optimizations that we currently support:

  • To embed the video with default width and height adapted to your theme:
    [youtube https://youtu.be/9GwrmbC94Es]
  • To specify the width and height explicitly:
    [youtube https://youtu.be/9GwrmbC94Es&w=320&h=240 ]
  • To specify the width only:
    [youtube https://youtu.be/9GwrmbC94Es&w=320 ]
  • To left align the player:
    [youtube https://youtu.be/9GwrmbC94Es&align=left]
  • To right align the player:
    [youtube https://youtu.be/9GwrmbC94Es&align=right ]
  • To hide the related videos from appearing after the video is done:
    [youtube https://youtu.be/9GwrmbC94Es&rel=0 ]
  • To start at a certain point in the video, convert the time of that point from minutes and seconds to all seconds, then add that number as shown (using an example start point of 1 minute 15 seconds):
    [youtube https://youtu.be/9GwrmbC94Es&start=75 ]
  • To specify a start and end time for a video, do the same as the above but add the end time as shown:
    [youtube https://youtu.be/9GwrmbC94Es &start=75&end=500 ]
  • To hide the top information bar:
    [youtube https://youtu.be/9GwrmbC94Es&showinfo=0 ]
  • To change the look of the player:
    [youtube https://youtu.be/9GwrmbC94Es&theme=light ]

You can combine all these features, just make sure you don’t add any space between each code.

[youtube https://youtu.be/9GwrmbC94Es&theme=light&autoplay=1&rel=0&showinfo=0&control=0&align=right]

Additional Embed Code

&autoplay=1                                   Automatically start video when page loads

&cc_load_policy=1                       Turn caption on

&controls=0                                    Turn off video controls, 1=default, 2 = the controls display and the Flash player loads after the user initiates the video playback.

ecver=1                                            Show suggested video and end of play

color=                                                red, yellow, blue, white

&loop=1                                           1 causes the player to play the initial video again and again.

Some features are Browser dependent.  In other words, it may not work in other web browsers like Chrome or Safari.

 

 

Advertisements