Embedding a video from a web service

Posts and pages – just paste and go!

Since WordPress 4.0. All you have to do is paste the address of a video into your editor, and WordPress takes care of the rest, even showing a preview of the video right in your editor! Dang, that’s simple.

Step 1: Copy the address from YouTube...

Step 1: Copy the address from YouTube.

Step 2: Paste the video URL into your editor, and the sample image of the video appears

Step 2: Paste the video URL into your editor, and the sample image of the video appears.

Interacting with the video in the editor isn’t possible (it’s just a snapshot) but you can click to preview your post to make sure it embeds and plays correctly.  The embed will fill your content width.

hiking bear country full width

Step 3: Check out how your full [content] width embed appears.

If you need custom dimensions for your video see the “advanced” section below.  

If your video does not show and the front end our your post only shows the video url, make sure the address of the video is not surrounded in HTML tags.  For example, if it’s surrounded in paragraph tags it won’t show correctly.

Advanced embedding – custom dimensions

Generally, online services will simply give you an embed code for any video/slideshow that you create or upload at their sites.  You can copy the code that they supply you, and then paste the code into a text editor or text widget within your site.  The example below is from youtube.  For other video sites, look for a “share” or “embed” link that provides code to customize, copy and paste.

A sample youtube video...

A sample youtube video…

You probably don't want to use the old embed code.

Youtube embed code with custom dimensions

A sample vimeo video

A sample vimeo video

Vimeo embed with custom dimensions

Vimeo embed with custom dimensions

Once you’ve copied the embed code, create (or edit) a post in WordPress, and switch into Text mode by clicking on the “Text” tab in the upper right corner of the post-writing area.

Youtube ex3

Once you’re in Text mode, paste in the embed code you copied.

Youtube ex4

As soon as you publish, you have your custom video displaying right inside a blog post. Cool!

Some embedded videos may not be visible when you “preview” a post in draft mode. You may just see in the preview a placeholder block where the video will be, but it will be visible after you publish the post or page

If you want to have a video in a widget area, just paste this same code in a text widget you have placed in a widget area in “Appearance” > “Widgets”.widget_embed

Alignment

When youtube and vimeo video links are simply pasted in they should center right away or take up the full width. Other videos require some custom CSS to be placed in “ProPhoto” > “Customize” > “Advanced” > “Custom Code”. See below for various options.
For Animoto videos, paste this to center:
.article-content iframe[src*="animoto"] { margin-left: auto; margin-right: auto; display: block; } /** center animoto embeds **/
OR, paste this to right-align all Animoto video players:
.article-content iframe[src*="animoto"] { margin-left: auto; margin-right: 0; display: block; } /** right-align animoto embeds **/
For Vimeo videos that don’t center automatically paste this to center:
.article-content iframe[src*="vimeo"] { margin-left: auto; margin-right: auto; display: block; } /** center vimeo embeds **/
OR, paste this to right-align all Vimeo video players:
.article-content iframe[src*="vimeo"] { margin-left: auto; margin-right: 0; display: block; } /** right-align vimeo embeds **/


Posts and pages – just paste and go!

Since WordPress 4.0. All you have to do is paste the address of a video into your editor, and WordPress takes care of the rest, even showing a preview of the video right in your editor! Dang, that’s simple.

Step 1: Copy the address from YouTube...

Step 1: Copy the address from YouTube.

Step 2: Paste the video URL into your editor, and the sample image of the video appears

Step 2: Paste the video URL into your editor, and the sample image of the video appears.

Interacting with the video in the editor isn’t possible (it’s just a snapshot) but you can click to preview your post to make sure it embeds and plays correctly.  The embed will fill your content width.

hiking bear country full width

Step 3: Check out how your full [content] width embed appears.

If you need custom dimensions for your video see the “advanced” section below.  

If your video does not show and the front end our your post only shows the video url, make sure the address of the video is not surrounded in HTML tags.  For example, if it’s surrounded in paragraph tags it won’t show correctly.

Advanced embedding – custom dimensions

Generally, online services will simply give you an embed code for any video/slideshow that you create or upload at their sites.  You can copy the code that they supply you, and then paste the code into a text editor or text widget within your site.  The example below is from youtube.  For other video sites, look for a “share” or “embed” link that provides code to customize, copy and paste.

A sample youtube video...

A sample youtube video…

You probably don't want to use the old embed code.

Youtube embed code with custom dimensions

A sample vimeo video

A sample vimeo video

Vimeo embed with custom dimensions

Vimeo embed with custom dimensions

Once you’ve copied the embed code, create (or edit) a post in WordPress, and switch into Text mode by clicking on the “Text” tab in the upper right corner of the post-writing area.

Youtube ex3

Once you’re in Text mode, paste in the embed code you copied.

Youtube ex4

As soon as you publish, you have your custom video displaying right inside a blog post. Cool!

Some embedded videos may not be visible when you “preview” a post in draft mode. You may just see in the preview a placeholder block where the video will be, but it will be visible after you publish the post or page

If you want to have a video in a widget area, just paste this same code in a text widget you have placed in a widget area in “Appearance” > “Widgets”.widget_embed

Alignment

When youtube and vimeo video links are simply pasted in they should center right away or take up the full width. Other videos require some custom CSS to be placed in “ProPhoto” > “Customize” > “Advanced” > “Custom Code”. See below for various options.
For Animoto videos, paste this to center:
.article-content iframe[src*="animoto"] { margin-left: auto; margin-right: auto; display: block; } /** center animoto embeds **/
OR, paste this to right-align all Animoto video players:
.article-content iframe[src*="animoto"] { margin-left: auto; margin-right: 0; display: block; } /** right-align animoto embeds **/
For Vimeo videos that don’t center automatically paste this to center:
.article-content iframe[src*="vimeo"] { margin-left: auto; margin-right: auto; display: block; } /** center vimeo embeds **/
OR, paste this to right-align all Vimeo video players:
.article-content iframe[src*="vimeo"] { margin-left: auto; margin-right: 0; display: block; } /** right-align vimeo embeds **/

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us