Sometimes, along with text content, there will be a need to embed videos in posts. Depending upon where they are hosted, videos can be embedded using different methods. If the video is hosted internally in your server and there is a direct link to it then it can be embedded using simple HTML5 Video tags.
If the video is hosted externally in sites like YouTube and Vimeo then you can use the embed codes provided by such services. You can also activate and use Jetpack’s Shortcode Embed feature to quickly place a video using just its URL. There are also several plugins which facilitate quick embedding.
This post is just an overview to show you how you can add videos to your WordPress content.
Embedding Self-Hosted in HTML5 Video
HTML5 Video is a way to use the in-built video player of a browser to display and play video content. It doesn’t require any plugins like flash. If the user has a modern internet browser, it will come with a built-in video player. All you have to do is use the <video> tag.
The HTML codes below should be placed in the Text view tab by switching from the default Visual view in WordPress while composing.
Here’s an example HTML5 Video embedding code
<video controls width=”560″ height=”315″>
<source src=”http://www.yoursite.com/video.mp4″>
</video>
Here’s what the player looks like
The controls option within video tag displays the play/pause controls and the slider. You can configure the width and height as per your preference. Another useful tag is autoplay which starts playing the video immediately.
Using autoplay in example
<video controls autoplay width=”560″ height=”315″>
<source src=”http://www.yoursite.com/video.mp4″>
</video>
Embedding Externally Hosted Videos
Using Embed Code
External videos from sites like YouTube, Vimeo and Dailymotion can be easily embedded using the embed codes that they provide. Those codes are usually below the video. For YouTube you’ll find the <iframe> code under Share > Embed.
The code looks something like this
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/-_xUdljMIBE” frameborder=”0″ allowfullscreen></iframe>
You can paste such codes in the Text view of WordPress and you’ll have an externally hosted video right in your blog posts.
Using Jetpack Shortcode Embed
If you list all the features of Jetpack, you’ll find something called Shortcode Embed. Once activated, you can use it to embed content from external websites. Contents can be video, audio, slides, maps etc. from popular websites.
For video embedding, the following websites are supported by Jetpack:
- YouTube
- Vimeo
- Flickr
- Dailymotion
- Vine
- Ted Talks
- tv
For embedding, generally what you need to do is copy and paste the video URL in the compose box and that’s it. WordPress will automatically embed the video. This is a simple method.
If you want to configure things like the size of the player, then you’ll have to use tags or short-codes like [Youtube]. Get the video URL, note the video site and place them in the tags. These short-codes can be added anywhere—in posts, sidebar and footer area widgets or even in comments.
Please note that I have placed a space after the first square bracket “[ ” so that embed codes won’t be generated in the examples.
For YouTube
[ youtube= https://www.youtube.com/watch?v=-_xUdljMIBE]
Width and Height Properties
Use: w & h
[ youtube=https://www.youtube.com/watch?v=-_xUdljMIBE&w=640&h=480]
* You can use only one.
Hiding Related Videos Shown at the End
Use: rel=0
[ youtube=https://www.youtube.com/watch?v=-_xUdljMIBE&rel=0]
* You can always combine these options separating with &.
Starting and Ending at a Certain Point
Use: start & end
[ youtube=https://www.youtube.com/watch?v=-_xUdljMIBE&start=60&end=120]
* You can use only one. The time is specified in seconds.
Hiding YouTube’s Top Information Bar
Use: showinfo=0
[ youtube=https://www.youtube.com/watch?v=-_xUdljMIBE&showinfo=0]
Using a Light Theme
Use: theme=light
[ youtube=https://www.youtube.com/watch?v=-_xUdljMIBE&theme=light]
Vimeo
Simply paste the URL. You can also get the video URL or id and use it as:
[ vimeo https://vimeo.com/124313553] or [ vimeo 124313553]
Specify Width and Height
Use: w & h
[ vimeo https://vimeo.com/124313553 w=480 h=360] or [ vimeo 124313553 w=480 h=360]
Vine
Get the Vine video URL from the address bar or using the share button and paste it. For configuration use these short-codes.
[ vine url=”https://vine.co/v/OLtQ6pIKQBm”]
Specifying width and height
[ vine url=”https://vine.co/v/OLtQ6pIKQBm;width=300 height=300″]
Flickr
If you want to do more than just pasting the video link won’t do. After getting the video link or id, use these short-codes
[ flickr video=https://www.flickr.com/photos/jesuscm/4192575165/] or [ flickr video= 4192575165]
Specifying width and height
Use: w and h
[ flickr video=https://www.flickr.com/photos/jesuscm/4192575165/ w=480 h=360] or [ flickr video= 4192575165 w=480 h=360]
Dailymotion
For video: http://www.dailymotion.com/video/x2jqma9_howling-live-at-jrs-studio-slices-live-special_music
Get the id: x2jqma9
[ dailymotion id=x2jqma9]
Blip.tv
[ blip.tv http://blip.tv/thelatenightreviewer/late-night-reviews-x-men-days-of-future-past-2014-7077898 width=480 height=360]