Embedding your Videopath video

← Back to documentation overview

If you are completely new to Videopath, it might be best to start with our Getting Started tutorial.

Embedding basics: the difference between inline and lightbox embedding, and how to embed your Videopath video on your website or blog.

Inline Embedding: Watch the video

When you inline embed a video on your webpage, your video is inserted within the content flow of your webpage. That means, a viewer views your video on your webpage (rather than as a pop-up or a full screen). Here’s an example of what inline embedding looks like on a website:

inline

Choosing your inline embed settings

Access your inline embed code on the first tab of your distribute page. The default size of the inline embed is set at 700px width and 525px height. Open the advanced settings below your embed code to change the width and height of your video.

Embed2

By checking “Keep Aspect Ratio,” you keep the width and height of your video related to one another proportionally. This ensures that your video won’t be stretched or compressed.Uncheck “Keep Aspect Ratio,” if you would like to change the width and height of your video independently.

The scaled version of your video on the right is to give you a sense of the size of your embedded video relative to a webpage, but you will be able to change the placement of the video on your website.

Lightbox Embedding: Watch the video

Lightbox videos appear as a clickable thumbnail on your website. When a viewer clicks on the thumbnail, the video will “pop out,” occupying the center of the page, and the rest of the window will dim out.  It’s a nice technique for videos that are high quality or will command your viewer’s full attention. Here’s an example of Videopath video that is displaying as a lightbox:

Embed3

Choosing your lightbox embed settings

You can find Videopath’s lightbox embed option on the second tab of the distribute screen. Open the advanced settings below your embed code. Start by defining the dimensions of your lightbox thumbnail. The size that you select for your thumbnail will be the size that the video appears on your webpage. There’s no need to define the lightbox video size as lightbox videos automatically expand to fill the screen when clicked.

Embedding your inline and lightbox video

Once you’ve finished editing your settings, you are ready to insert your embed code into your website or blog. Copy the code from the “embed code” box. You can use the inline embed code (begins with <iframe…) or the lightbox code (begins with <div…).

embed code

You can use the inline embed code (begins with <iframe…) or the lightbox code (begins with <div…). Open the HTML editor in your website or blog. Copy and paste the embed code where you would like the video to appear. You’re done!

Embedding FAQ

Q: If I’ve already embedded my video, how do I change my embedding settings?

  • If your video is embedded and you would like to change the embedding settings (like the size of your embedded video), your embedded will not automatically reflect these changes. Copy your new embed code and replace your old embed code with your new one.

Q: If I’ve already embedded my video, how do I change my thumbnail?

  • If your video is already finished and embedded and you’d like to change your thumbnail, change your thumbnail in the Videopath editor and press “Update” to update your finished video. You’ll need to replace your old embed code with your new one.

Q: Can I embed my Videopath video on a https domain?

  • You can embed your Videopath video on an “https” domain. If your Videopath video has “http” websites embedded on your overlays, these websites will not display when embedded on an “https” domain.

This page is part of the Videopath documentation. If you have any questions, please don't hesitate to get in touch.