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.
How to embed your video
- Log in to your Animoto account.
- 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.
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
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)
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)
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.
This setting will cause your video to automatically start playing when the web page loads.
Choose the LOOP option if you want the video to automatically restart after it finishes playing. (learn more)
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>