Videos

Inserting a Video

Insert a YouTube, Vimeo or other video directly in content or open a video in our Summit lightbox.

Related Video Tutorials
Embedding a video and launching a video in a lightbox

Teaches you how to embed a video and launch a video in a lightbox

Step 1: Switch To Backend Editor

To insert an icon, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Video

Click "Icon" in the Visual Composer Modal to insert an video, for example:

Video Settings
Step 3: Edit Video Settings

Once the video element has been inserted click the Edit Link(pen icon) of the icons, for example:

Video Settings

Here is an overview of available video options:

  • Video

    Select the icon to be used.

  • Video Type

    Determines what type of video to show, either Vimeo, YouTube or Other:

    • Vimeo Video ID

      This is where you enter the Vimeo video ID, which generally look something like this:
      https://vimeo.com/46697798.

    • YouTube Video ID

      This is where you enter the YouTube video ID, which generally look something like this: https://www.youtube.com/watch?v=bPg4tk7VFR0.

    • Video URL

      This is where you enter the video URL of the video you want to show. Note: the video will be shown in an iframe.

  • Video Width

    Enter the width of the video. Defaults to 1110px (content width). Note: A width is required to determine the scaling ratio of the video.

  • Video Height

    Enter the height of the video. Defaults to 624px (content width). Note: A height is required to determine the scaling ratio of the video.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Lightbox

    Whether caption should appear below the video, over the video or as a rollover caption.

  • Group ID

    Associate an image to a specific lightbox group. This will allows user to browser through grouped image in the lightbox.

  • Lightbox Toolbar Zoom Button

    Whether the lightbox media should be zoomable.

  • Lightbox Toolbar Share Button

    Whether the lightbox media should be sharable through Facebook, Twitter and Google+.

  • Lightbox Caption

    The lightbox media caption. Leave blank if no caption is wanted.

  • Thumbnail Link

    Determines the rollover animation style.

  • Caption Vertical Alignment

    Whether caption should be vertically aligned top, middle or bottom. This only takes effect if you are using an overlayed or rollover caption.

  • Caption Horizontal Alignment

    Whether the caption should be left, center or right aligned. This takes effect for all caption types.

  • Color Options

    Rollover Background Color
    Caption Text Color

  • Color Options

    Label Color
    Label Hover Color

  • Rollover Animation Type

    Determines the rollover animation style.

  • Rollover Animation Duration

    Determines how long the rollover animation should be. Expressed in milliseconds i.e. 1000 represents 1 second.

  • Rollover Easing Type

    Determines the rollover animation easing type.

  • Lightbox Animation

    Determines the animation of the lightbox upon entering the viewport.

Can't find what you're looking for? Submit a request in our forum.