Embedding a video a website or blog

Playing your video from your own website is easy when you use our embed option. Just choose the appropriate settings, and copy and paste the HTML code generated to your own web pages.

Before you begin: If your blog is hosted with wordpress.com, Tumblr, or Blogger, you don't need to use the embed code. From the "Share" section, click "More" to see options to post directly to these popular blogging platforms.

How to embed your video

  1. Log in to your Animoto account.
  2. From your video’s player page, you'll see the sharing options along the right-hand side of your screen. Click the Embed option to see the full list of choices.

Screen_Shot_2017-11-27_at_6.14.19_PM.png

3. Choose the one that's right for you.

4. Copy the embed code to your clipboard.

5. Paste the embed code directly into your website or blog's HTML source code.

 

Embedded video options explained 

Size

These are the width and height dimensions in pixels. If the dimensions you need aren't listed here, you can alter your video’s pixel height and width directly in the embed code. (Learn more)

Quality

We recommend 720p to ensure the highest-quality streaming on your webpage, but you can choose a lower setting. If you’re not seeing 720p as an option, it means you haven’t upgraded the resolution of your video to HD. (Learn more)

Volume

This setting tells the video player the starting volume you want for your video. We recommend leaving this at 100%, but if you plan on using autostart, you might consider lowering the volume.

Autostart

This setting will cause your video to automatically start playing when the web page loads.

Loop

Choose the LOOP option if you want the video to automatically restart after it finishes playing. (learn more)

SSL

This setting should be left enabled. The SSL setting tells the web browser to play the video over a secure connection. Enabling SSL is important if your webpage is also secured. If you disable the SSL setting on a secured webpage, website visitors could see an error that lets them know the website may not be secure.

Use Legacy Embed

Our embed code uses an IFRAME to display your video, because it's the most compatible option for the majority of website visitors for web and mobile devices. If your website doesn't support IFRAMEs, you could try using the the legacy embed option.

Call to Action

If you want to show a call to action after your video, you can use this setting to specify a button label (e.g. "Click here for more info"), along with a URL link to direct the viewer.

Centering your video on the page

Crafting HTML is beyond the scope of this article, but a quick and easy way you can center your video on a web page is to wrap your iFrame code with some <div> tags.

Below is an example embed code, with the <div></div> tags highlighted in red text. Remember to add the </div> tag at the end of your code.

When setting the "width" of the <div> tag, use the same width specified as part of the <iframe> tag, marked in bold.

<div style="margin-left: auto; margin-right: auto; width: 544px;"><iframe id="vp19QnqL" title="Video Player" width="544" height="306" frameborder="0" src="https://s3.amazonaws.com/embed.animoto.com/play.html?w=swf/production/vp1&e=1448910296&f=9QnqLJcMVD906Mzzwrp4Bw&d=0&m=p&r=360p+720p&volume=100&start_res=720p&i=m&asset_domain=s3-p.animoto.com&animoto_domain=animoto.com&options=" allowfullscreen></iframe></div>

 

You may have difficulty using our embed code if your web hosting provider doesn't support IFRAME embedding. If the generated code doesn't work for you, check with your website provider.
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk