WordPress Insert Video
In several articles, we've already reviewed some WordPress image management tools that make it easy to create engaging posts and pages.
In this article, we'll show you how you can add video clips to your posts (as well as pages).
Insert Local Video
Click on Posts > Edit or Posts > Add New to enter Edit Post screen:
Click on Add Media button to enter Insert Media screen.
If you have not uploaded the video files yet, click on the Upload tab and from the next screen upload the video files. Click on the file you want to insert in the post:
If you change your mind and decide to use another file, hover over check-mark sign (it will turn into a minus sign) and click the icon:
When you select your video file in the right sidebar WordPress will display two sections:
Attachment Details - we encourage you to take a time and insert keywords optimized information in all fields - Title, Caption and Description. WordPress will automatically create attachment page where all this information will be displayed. What is even more exciting is the fact that you can put a link to this attachment page anywhere in your site (sitemap page, sidebar, footer ...) and it will be crawled by the search engines' bots and will be included in the search engine index.
Attachment Display Settings - from the dropdown list you can use the most suitable option for you, in our example we are going to use all, of course. Select Embed Media Player and click Insert into post button.
From the Edit Post screen click below the file on an empty row and click again Add Media button. Select the same image and select the second option - Link to Media File.
Repeat the step once again to select the last option - Link to Attachment Page.
Toggle your editor mode to Text and it must look this:
Click Publish or Update to save the changes and click View Post:
Click on Link to Media File link:
Click on Link to Attachment Page:
These attachment pages if used smartly can be an indispensable assets for the popularity of your site and there is no sensible excuse not to be used.
Let's check one more thing - the video file takes all width of the content area. Is there a way for us to resize it and make it smaller?
Yes, in the Text mode of the editor copy the embed code from top and paste it below the second link. Change the width to 333 and delete the height property.
Thus way the browser will keep the aspect ratio of the source file and will not damage the video. Actually you can keep the height property and change it to any value - the video will be resized according to the width value.
[video width="333" height="111" mp4="http://hostpulse-demo.net/wp-content/uploads/2017/08/cellphone.mp4"][/video]
Go back to editor, change the mode to Visual, click on the video and click on the Edit button:
In Video Details screen you are provided with several options:
You can remove video by clicking the link REMOVE VIDEO SOURCE.
Video alternate sources - use the following options to define specific filetypes, allowing for graceful fallbacks:
Select your preferred preload option:
- metadata - ("default") only metadata should be loaded when the page loads
- none - the video should not be loaded when the page loads
- auto - the video should be loaded entirely when the page loads
Autoplay - if selected will cause the media to automatically play as soon as the media file is ready.
Loop - if selected media will loop to beginning when finished and automatically continue playing.
Clicking on Replace Video link will take you to Replace Video screen where you can replace the video file:
By clicking on Select Poster Image you can select an image from Media Library to represent the video:
Use Add Subtitle link to upload the subtitle file if the video needs such. If you upload subtitle file you can add Title, Caption and Description on Attachment Details screen:
After clicking on Add Subtitles button the file information will be included at the bottom of the Video Details screen:
You can click on Cancel Edit link to reset all changes or you can click on the Update button to save the changes.
Insert Video from URL
Click within the editor where you want your video to appear and click Add Media. On the Insert Media screen click Insert from URL link and enter the video URL in the field:
Click Insert into post button, click Update and click View Post:
Built in Embeds
To embed a video place its URL into the content area. Make sure the URL is on its own line and not hyperlinked (clickable when viewing the post).
WordPress Video: https://www.youtube.com/watch?v=X4rYTJ617gU
WordPress will automatically turn the URL into a YouTube embed and provide a live preview in the visual editor:
Instead of just pasting the URL into the post you can use the [video] shortcode which gives you the advantage of using many editing options.
Some of these options are included in the video editor and we've already talked about them:
- Video source file
- Video alternate sources (mp4, ogv, webm)
- Poster Image
- Preload options
The following basic options are supported:
The source of your video file. If not included it will auto-populate with the first video file attached to the post. You can use the following options to define specific filetypes, allowing for graceful fallbacks:
Default: First video file attached to the post
poster (optional) Defines image to show as placeholder before the media plays. Default: None
Allows for the looping of media. Defaults to "off".
off - (default) does not loop the media
on - media will loop to beginning when finished and automatically continue playing
Causes the media to automatically play as soon as the media file is ready.
off - (default) does not automatically play the media
on - Media will play as soon as the media is ready
Specifies if and how the video should be loaded when the page loads.
metadata - (default) only metadata should be loaded when the page loads
none - the video should not be loaded when the page loads
auto - the video should be loaded entirely when the page loads
height (required) Defines height of the media. Value is automatically detected on file upload. Default: (Media file height)
width (required) Defines width of the media. Value is automatically detected on file upload. Note that the theme's content_width sets the maximum width. Default: (Media file width)
Another option is to wrap the URL in the [embed] shortcode:
If WordPress fails to embed the URL, the post will contain a hyperlink to the URL.
Using [embed] shortcode gives you the opportunity to re-size the video dimensions to match perfectly to your post design.
You can use both shortcodes to embed video, but [video] gives you more options.
youtube.com Embed Code
Many popular video services like Youtube and Vimeo allow you to copy the embed code from their sites by right click on the video:
And when you paste the code WordPress will include the video into your post:
<iframe src="https://www.youtube.com/embed/KiS8rZBeIO0" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Click in the editor where you want the video playlist to be placed and click the Add Media button.
In the Insert Media screen click Create Video Playlist link:
In the Create Video Playlist screen you can select video files for your playlist and add attachment details for each file:
When you are ready click Create a new video playlist button.
In the Edit Video Playlist screen you are provided with many editing options:
- remove, add new or reorder (by clicking Reverse order button or by click'n'drag the file to a new position) files
- edit file caption
- show/hide video list
- show/hide images
Click Insert Video Playlist to finish editing. Wordpress will automatically add this shortcode to your editor:
[playlist type="video" ids="202,203,204"]
Update the post and View Post:
If you want to edit the playlist go to editor in visual mode, click on the image and click on the pencil icon:
From Edit Video Playlist screen you can edit your video playlist.
WordPress provides many ways to include video clips in your posts and pages as well as many options to control the way these files are displayed and behave. We hope this information will help you to easily manage your video files.