The Complete Guide To Embed Almost Anything In Your WordPress Site

WordPress oEmbed support makes it extremely easy to embed images, video, audio & other contents from external sources in your self hosted WordPress website. You just need to paste the URL of the content on the editor; and WordPress will automatically turn it into an embed. Here is a List of sites that WordPress supports till date, but still there are lots of content from sites that we want to embed but WordPress doesn’t support yet.
For easy navigation we created these buttons which will take you to your desired section.

1. Embed Documents

Using oEmbed you can embed content from below websites without any extra plugin or hassle. Just paste it in the editor and WordPress will do the rest.

1.1 Embed PDF, MS Word, PowerPoint, Spreadsheet

If you want to embed any documents (PDF, MS Word, PowerPoint, Spreadsheet or other) in a WordPress post or page, follow these steps:

1. Download Google Doc Embedder and install
2. Upload your document from the Dashboard -> Media -> Add Media and copy the URL
3. Go to the post/ page, where you want to embed the document
4. Click on Google Doc Embedder Icon From editor
   

   How To Use Google Doc Embedder

5. Paste your document link in the URL field & Click inset
6. Publish / Update your Post / Page

Beside Google Doc Embedder there is another plugin some people find quite useful is Embed Any Document.

1.2 Embed Google Docs – Without Plugin

If you want to embed Google documents (Slide, Doc or Sheets) from your Google Drive to your WordPress post or page, follow these steps

How to embed google doc

1. After creating the document, Click on File -> Publish to the web..
2. Click on Embed tab
3. Click on Publish. A popup will appear, Click Ok
4. Copy the embed code & paste it in your post / page

1.3 Embed Google Form – Without Plugin

Embed Google Form

If you want to embed a Google Form, follow these steps

1. After creating your survey, Click on the Send form button
2. You’ll see a popup, Click on Embed
3. Copy the embed code & paste it in your post / page

2. Embed Maps

2.1 Embed Google Maps – Without Plugin

Embed Google Maps

1. Go to Google Maps, type in your location
2. Click on the gear icon, then on Share or embed maps
3. Click on Embed tab, Copy the embed code
4. Go to Dashboard -> Posts or Pages and select the post
5. Switch to Text tab and paste the embed code
6. Click Publish / Update

2.2 Embed Google Maps – With Plugin

Embedding a map manually is fine if you want to embed it one or two places. But it’s quite cumbersome if the amount of posts is high, or maybe you need to frequently add maps in your content. MapPress Easy Google Maps is great plugin for including maps in your post without going through the unnecessary hassle. Follow these steps to embed maps using MapPress:

1. Download & install MapPress Easy Google Maps
2. Edit the post or page where you want to include the map
3. At the bottom of the post editing screen, you will see MapPress section, Click on New Map
4. Type in your location on Add POI field
5. Give your map a name in Map Title field
6. Click on Save, then Insert into post
7. Click on Update to publish the post or page

You can include multiple maps in a post or page using MapPress. If you want to configure additional setting go to Dashboard -> MapPress and use this MapPress detailed documentation to guide you through the settings.

2.3 Embed Bing Maps – Without Plugin

Follow these steps if you want to embed Bing maps in your WordPress post or pages:

Bing Map Embed Code

1. Go to Bing Maps, type in your location
2. Click on Share button, a popup will appear with an embed code
3. Copy the embed code from EMBED IN A WEBPAGE section
4. Go to the Post or Page, switch to Text tab
5. Paste it in your post or page, click Update.

2.4 Embed Bing Maps – With Plugin

Leaflet Maps Marker is great for including Bing Maps in your post or pages, but it requires Bing Map API Key. Follow these steps to include maps in your post or page without going through all the hassle

1. Download & install Leaflet Maps Marker
2. Go to Maps Marker -> Settings -> Bing Maps
3. Paste your API Key in Bing Maps API Key field, Click Save Changes
4. Go to Maps Marker -> Settings -> Map Defaults
5. Select Bing Maps from Default Basemap, Click Save Changes
6. Go to Maps Marker -> Add new marker to add a map
7. Give your map a name & type in your desired location
8. Click on Publish, it will generate a shortcode
9. Paste the shortcode in your post or page, click Update.

3. Embed Video

3.1 Using oEmbed

Since introducing oEmbed, it is easy now to embed videos from popular websites (YouTube, Vimeo, Vine, Ted, etc.). You just need to paste the link and WordPress will take care rest of it.

Paste the YouTube Video URL in this way:

https://www.youtube.com/watch?v=MD5bFCDfySc

That was a cool video. It will result in

3.2 Using Embed Shortcode

If you want  text beside your embedded video you can use embed shortcode. (Applicable only to sites supported by WordPress). Just write your videos URL between [ embed][/embed] tag.

I will not leave this URL, I am staying beside him forever: p [ embed]http://www.youtube.com/watch?v=dQw4w9WgXcQ[/embed]

But if you need further control of your embedded video you can try these plugins:

3.3 Customizing YouTube Video Embed with Jetpack

Using Jetpack you can change the height, width of an embedded YouTube video, even set the start and end point of a video. Follow these steps to customize the YouTube embed with Jetpack.

1. Download & install Jetpack
2. Activate the Jetpack plugin, then go to Jetpack -> Settings
3. Click on Activate next to Shortcode embeds
4. Go to the post or page you want to embed video
5. Write your YouTube URL in below format

   [youtube= https://www.youtube.com/watch?v=VEpMj-tqixs]

6. Now if you want, you can customize the height and width of a video by adding relevant parameters

   [youtube= https://www.youtube.com/watch?v=VEpMj-tqixs&w=640&h=385]

7. Click on Publish / Update

Parameters

Width - &w= Height - &h= Related Videos - &rel= [0 for hide & 1 for show] Starting Point - start= [In seconds] Start & End Time - start=75&end=85 Player Information Bar - showinfo=0 Player Theme - theme=light

For detailed explanation,visit this page.

3.4 Making The YouTube Video Responsive

1. Download & install Advanced Responsive Video Embedder
2. Go to Dashboard -> Post or Page (you want to insert video)
3. Click on Embed Video button beside Add Media, a window will pop up
4. Select the particular and click on Insert Shortcode
5. Click Save or Update

Tip: If you are using Optimizer Pro, you can insert responsive YouTube or Vimeo video from Shortcodes -> Image & Video -> YouTube Responsive Video

3.5 Embedding a YouTube Channel

You can embed a YouTube channel as a playlist by following these steps:

1. Download & Install YouTube Embed Plugin
2. Go to Dashboard -> Post or Page (you want to insert video)
3. Click on YouTube button beside Add Media
4. A window will pop up, Click on Search for a video or channel to insert
5. Select A channel as a playlist
6. Copy the URL of any single video of that channel & paste it
7. Click on Search, then Insert into Editor -> Insert on a New Line
8. Click Save or Update

Tip: You can also embed the channel as a gallery. If you are a visual learner, check out this here is a video tutorial.

4. Embed Audio

Since introducing oEmbed, it is easy now to embed audio from popular websites. You just need to paste the link and WordPress will take care the rest of it.

4.1 Embedding An Audio File

1. Go to the Post or Page you want to embed audio
2. Click on Add Media
3. Click Upload Files tab
4. Upload an audio file (see the supported list)
5. Select the file you uploaded, scroll down to Attachment Display Settings and make sure to set Embed or Link to “Embed Media Player”.
6. Click Insert into page.

5. Embed Code Blocks

5.1 Posting Code Blocks on Your WordPress Post or Page

1. Go to the post or page you want ot show code blocks
2. Switch to Text editor
3. Write your code in between <pre><code> </code></pre> tag

   <pre><code>
   .ninja {
   visibility: hidden;
   }
   </code></pre>

4. Click on Update / Publish

5.2 Posting Code Blocks With Syntax Highlight

1. Download, install & activate SyntaxHighlighter Evolved
2. Go to the post or page you want to show code blocks
3. Write your code in below format

   [css]your code here[/css]

4. Click on Update / Publish

Tip: You can change the color theme from Settings -> SyntaxHighlighter -> Color Theme

5.3 oEmbed GitHub Gist

1. Download, install & activate oEmbed Gist
2. Go to the post or page you want embed gist
3. Paste the gist URL
   https://gist.github.com/MakarovAlexey/55c0fb565de063990813
4. Click on Update / Publish

5.4 Embed CodePen

1. Download, install & activate CodePen oEmbed
2. Go to the post or page you want embed CodePen
3. Paste the CodePen URL
   http://codepen.io/tmrDevelops/pen/YXNqOj
4. Click on Update / Publish

6. Embed Social Media Content

You can easily embed contents (Post, Tweet, instagram) from popular social media. You just need to paste the link and WordPress will take care rest of it.

Check out this cool Tweet:

https://twitter.com/Avengers/status/596721475987476481

That was a cool Tweet. It will result in

Experience the global phenomenon! Get tickets to see #Avengers #AgeOfUltron, now in theaters: http://t.co/bTsEOI4l7Zhttps://t.co/zGxhNel6F0

— The Avengers (@Avengers) May 8, 2015

6.1 Embedding Facebook

6.1.1 Embed Facebook Post Using Facebook Plugin

1. Download & Install Facebook plugin
2. Copy the Facebook post URL you want to embed
3. Paste it on to the post or page
4. Now your Facebook post will be embedded whenever you paste it on the editor

6.1.2 Embed Facebook Page, Events Using WP Embed Facebook

1. Download & Install WP Embed Facebook
2. Get the Facebook API Key (tutorial)
3. Go to Dashboard -> Settings -> Embed Facebook
4. Paste your App ID & App Secret in Facebook application data section
5. Copy the Facebook Page or Events URL you want to embed
6. Paste it on to the post or page
7. Now your Facebook Page or Events will be embedded whenever you paste it in the editor

6.2 Embed Pinterest Board

1. Go to the Pinterest board you want to embed & copy the URL
2. Now go to Pinterest Widget Builder, paste the URL in Pinterest Board URL field
3. Select the size of the board & click on Build It
4. Copy the embed code
5. Now go to Dashboard -> Post or Page you want to embe the board
6. Switch from Visual to Text tab, Paste the embed code
7. Click Publish / Update

Tip: If you want to display a Pinterest board on to a sidebar widget go to Appearance -> Widgets. Add a text widget to the widget area and paste the code into the text widget.

6.3 Embed Twitter Feed

You can embed Twitter feed, list, favorite tweet & tweet search timeline in your wordpress post, page and widgets. Follow these steps to embed twitter feed to your widgets.

1. Go to Twitter Widget Settings and click on Create New
2. If you want to show your Twitter feed, make sure the User timeline is selected
3. Click on Create Widget & copy the embed code
4. Go to Appearance -> Widgets & Click on Text Widget
5. Add it to your themes widget section
6. Paste the code you copied
7. Click Save

7. Embed Content From Your Site

Whether you want to embed a page in a page or post in a page, it can be done easily with Insert Pages plugins. Just follow these steps:

1. Download and activate Insert Pages
2. Go to the post or page editor (where you want to insert another of your post or page)
3. Click on Insert Pages button from the editor
   

   Embedding Your Post

4. A box will appear, select the post or page you want to insert
   

   Insert Pages

5. Click on Options and select how much of the content (Title, Link, Excerpt, Content) you want to display from Display drop-down
6. Click on Insert Page (it will include a shortcode), then click Update / Publish

8. Embed Content From Other or External Sites

8.1 Using Embed.ly

1. Go to embed.ly
2. Click on Create Embed & paste the URL in field
3. Click on Embed & copy the embed code
4. Paste it in your post or page and Save changes

8.2 Using Iframe (without plugin)

1. 1. Go to Post or Page editor
   2. Switch to Text tab, paste your contnet’s URL within iframe html tags

<iframe src="http://www.layerthemes.com" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"><iframe>

1. Click Update/ Publish

What did we miss? If you think we have missed anything please let us know in the comments.