Home > Help Center > Applications > WordPress > WordPress Insert Video

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:

wordpress video

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:

wordpress video

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:

wordpress video

When you select your video file in the right sidebar WordPress will display two sections:

wordpress video

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:

wordpress video

Click Publish or Update to save the changes and click View Post:

wordpress video

Click on Link to Media File link:

wordpress video

Click on Link to Attachment Page:

wordpress video

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]

wordpress video

Edit Video

Go back to editor, change the mode to Visual, click on the video and click on the Edit button:

wordpress video

In Video Details screen you are provided with several options:

wordpress video

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: ogv and webm.

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:

wordpress video

By clicking on Select Poster Image you can select an image from Media Library to represent the video:

wordpress 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:

wordpress video

After clicking on Add Subtitles button the file information will be included at the bottom of the Video Details screen:

wordpress video

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:

wordpress video

Click Insert into post button, click Update and click View Post:

wordpress video

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:

wordpress video

wordpress video

Video Shortcode

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:

src (optional) 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: mp4, m4v, webm, ogv, wmv, flv Default: First video file attached to the post

poster (optional) Defines image to show as placeholder before the media plays. Default: None

loop (optional) 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

autoplay (optional) 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

preload (optional) 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)

Embed shortcode

Another option is to wrap the URL in the [embed] shortcode:

[embed width="440"]https://vimeo.com/138093355[/embed]

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:

wordpress 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>

Video Playlist

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:

wordpress video

In the Create Video Playlist screen you can select video files for your playlist and add attachment details for each file:

wordpress video

When you are ready click Create a new video playlist button.

wordpress video

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:

wordpress video

If you want to edit the playlist go to editor in visual mode, click on the image and click on the pencil icon:

wordpress video

From Edit Video Playlist screen you can edit your video playlist.

Conclusion

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.

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support