Documentation Embedding rich media in your post

Embedding rich media in your post

Overview #

As a member of VIP, you are able to embed rich media into your posts. This document will quickly explain how embedding works.

↑ Top ↑

Commonly Used Embeds #

Looking to embed content from YouTube, Hulu, InstagramVimeoBlip.tvCNNMoney videoDaily MotionGist or Rdio? Simply copy the URL in your browser bar while viewing the video or photograph, and paste it into your editor on its own line. We’ll automatically embed the content for you.

Note: Make sure the URL is not linked or formatted in any way, and that it is on its own line. You can read more about WordPress’s custom embeds here.

Looking to embed content from Scribd, Slideshare, Wufoo, Flickr Video, SoundCloud or Bandcamp? Each of these services offers a shortcode that you can paste directly into your post editor. Click on the service’s name above for more information on how to embed their content.

↑ Top ↑

iFrames and Objects #

Besides the commonly used embeds listed above, embeds that are Objects or iFrames can be placed directly into your VIP post editor. Simply speaking, “Objects” are items that begin with <object>, and “iFrames” are items that begin with <iframe>. Just copy the code, click on “Text” in the upper right corner in your editor, and paste the code in where you would like the embedded content to appear in your post.

↑ Top ↑

Scripts # automatically protects all iFrames and Object embeds, but with Scripts it’s more difficult for us to tell what needs to be protected, since scripts often have components like <div> and <noscript> that should also be protected while remaining a part of the the embed. For this reason, VIP handles embeds that begin with <script> a little differently. Here’s how to embed code that begins with <script>.

1) In your post editor, there is a tool above the formatting bar that allows you to include scripts. You can click either “Add Media” or “Add Embed.”

Screen Shot 2013-07-22 at 5.55.27 PM

2) A window will pop up. Be sure to select the “Insert Embed” tab. Paste the script code into this window, and click “Insert.”

Screen Shot 2013-07-22 at 5.55.56 PM

3) A shortcode will be inserted in your post, representing your protected embed.

↑ Top ↑

Custom Widths/Heights For “Protected Embeds” #

Our “protected embeds” feature attempts to make an educated guess at the ideal width or height of your embed, but if the object you’re embedding doesn’t make those values obvious, we’re not always able to do that. Instead, you can specify your own width or height attributes for the iframes in the shortcode, as such:

protected-iframe id="#" info="#" width="100%" height="200"