Articles in this section

See more

How-to: Embed a Video

Avatar
tomk
Updated
Follow

Topics

What is an Embed Code?

An embed code is a little bit of HTML that allows your video to show up elsewhere on the web, like your own site, a blog, or a forum that supports embedding. It looks very different depending on the technique used.

Types of Viddler Embed Codes

Viddler has 2 different types of embed codes, which will allow you to choose the features you’d like to have in a format that will work with your site.

Legacy [Deprecated]

This is the original flavor of embed code at Viddler. These days, it’s reserved for users that aren’t really interested in mobile video, but want to leave the feature enabled for the future.

Flash with HTML5 Fallback Support [Deprecated]

This code is a middle ground between Legacy and iframe. It uses our standard flash player on full-fledged desktop platforms (Windows, Mac, and Linux), and will offer up an HTML5 Version for mobile platforms. It does not ensure future compatibility for new desktop and mobile formats, unlike the iframe.

iframe

The iframe embed code is the best option in most cases. It supports our current players and formats (Flash, HTML5 Mobile) with much less required code, making it easier to read. The iframe will also support any new formats we may add in the future without requiring any changes to the code.

Example:

<iframe id="viddler-7c1804e8" src="//www.viddler.com/embed/7c1804e8/?f=1&player=full&secret=30641456" width="650" height="408" frameborder="0" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

div (for Arpeggio Player)

The div embed code is our most versatile embed code. It will only be available when using our Arpeggio player. You can customize the player on a per-embed basis using CSS and other HTML5 standards. If you're displaying advertizements on your videos, you can enter VAST tags within the div embed code. See more on embedding with div.

Example:

Viddler-Arpeggio-divembed-VASTtag.png

 

 Applying Default Embed Code settings

The default setting controls the code automatically generated when you click on “embed” as well as providing the code when posting to a blog directly from Viddler.com To set the default settings, go to your Player Setup tab on the default settings page. The option is listed  as “Default embed settings”.

default_embed_settings.PNG

How to Get an Embed Code

From “Your Videos” page

You can easily find the “Embed” link for each video in the “Your Videos” section:
EmbedLink

This will bring you to the "Embed" tab on the manage page for the video, where you can choose all kinds of options for your embed code if you’d like:

embed_options.PNG

  1. Embed size—Choose the size of the total embed. The total size is the Video size (shown on the right side) plus the player controls.
    1. Lock aspect ratio—Prevents the video from being stretched by increasing the dimensions in scale when they are changed.
    2. Make Responsive—Allows the video to scale and fit into the screen of devices such as tablets or mobile phones.
  2. Options—The Most used options are here:
    1. Auto-play—Begins the video as soon as the player loads.
    2. Mute—Mutes the video when the player loads.
    3. Loop Video—Restarts playback from the beginning after the video completes.

 

The second half of the page gives you more options to apply to your embed code.

advanced_embed_options.PNG

  1. Advanced options—Choose various additional settings supported by our player. Choose the setting you want to alter from the dropdown and click the “Add” button.
  2. Embed code area—View the generated embed code.
    1. Player Embed- The HTML embed code that can be placed on your website.
    2. Comments Embed- The HTML embed code that can be used if you desire to have comments available for the video.
  3. Copy Button—Copy the generated embed code to your clipboard. You can then paste it on your site.
  4. Special Embeds (Tab)- Different embed code options including 
    1. iFrame - HTML element that allows embed code to be inserted anywhere on the web page.
    2. Legacy (not fully supported)
    3. Arpeggio Scorm Package - Scorm is an acronym for sharable content object reference model
    4. Adobe DBS
    5. Arpeggio JS tag - embed code that can be customized with javascript

From the Player

If the “Embed” Privacy setting is set to “Everyone” the embed code can be obtained from the player itself:
3.6Sharing-Embed

  1. Click the Share Button on the player
  2. Click on the Link & Embed section (if is not already there)
  3. Choose embed code type from the dropdown menu and click “Copy”

Next Steps

After you have the embed code you’d like, you can paste it to your website.

Extended reading

Comments

0 comments

Article is closed for comments.