Video – Avada Website Builder https://avada.com For WordPress & WooCommerce Tue, 21 May 2024 07:54:49 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 Placing Videos in Avada https://avada.com/documentation/placing-videos-in-avada/ Thu, 13 Feb 2020 20:18:32 +0000 https://theme-fusion.com/?post_type=documentation&p=657429

As Internet speeds increase, videos are increasingly common on websites. Videos can make a site dynamic and more interesting than a static page. With Avada, we offer a wide range of options for adding videos to your website, including YouTube, Vimeo, and self-hosted videos.

Generally, YouTube and Vimeo videos are most commonly used, as these are not served directly from your server and so don’t affect your bandwidth, but self-hosted videos, despite their potential for affecting page load speed and server bandwidth, can also be used in clever ways in Avada, and should not be ruled out. This help file looks at how videos can be used in Avada.

Where Can I Use Videos In Avada?

Videos In Sliders

All major sliders that ship with Avada support videos, including Avada Slider, Slider Revolution, and Layer Slider. Of course, each slider has a different process for adding videos, but all three support YouTube, Vimeo, and self-hosted videos.

You can use any video type in a slider, but this is generally where self-hosted videos come into their own. The most appropriate videos for sliders are often small background videos that are muted, autoplay upon load, and with no controls. YouTube and Vimeo videos often have overlays and ads, etc, so it’s here a small self-hosted video fits the bill.

Videos As Container Backgrounds

You can also use videos as Container backgrounds, through the Container > BG > Video tab. Again, these are best as background videos, rather than feature videos, as the container dimensions may not fit the video size and content will likely be placed above the video in the container and its column/s.

For more details on the Container Background tabs, including the video tab, please see the How To Use Container & Column Background Options doc and video.

Videos In A Lightbox

Videos can also be opened in a Lightbox, in a variety of ways. You can of course use the Lightbox Element, which we will cover below, in the Elements section, but you can also trigger a video in a Lightbox from a Column.

Editing any Column, you will find the Link URL field and the Link Target field, directly below this. Simply add your video URL in the Link URL field, and set the Link Target Field to Lightbox. The whole column then becomes a link, and clicking on it brings the video up in a Lightbox, ready to play.

Useful Elements for Videos

There are three video Elements in Avada, as well as a number of elements that can be used to trigger or display videos.

  • Video Element – this is for self-hosted videos. This offers a range of options for both video format and layout options.

  • Vimeo Element – easily add Vimeo videos to your content. There are dimension and alignment options, as well as autoplay and additional API paremeter options.

  • YouTube Element – easily add YouTube videos to your content. There are dimension and alignment options, as well as autoplay and additional API paremeter options.

  • Lightbox Element – The Lightbox Element has a Video Content type, and when this is selected, you can add any video URL here, as well as control a thumbnail, title and description. This is an easy and stylish way to play a video in a  Lightbox.

  • Button Element – You can also trigger a video in a Lightbox from the Button Element. Simply add the Video URL in the Button URL field, and select Lightbox as the Button Target.

  • Modal Element – You can add a video to a Modal dialog as its content, by adding another video based element, like the YouTube Element, into the Contents of Modal field, through the Avada Shortcode generator, when editing the Modal Element.

Some Examples

Click To Open Video!

Self-Hosted Video in a Lightbox Element

Self-Hosted Video in a Lightbox, being triggered from a Column

Self-Hosted Video in a Lightbox, being triggered by a Button

Self-hosted Video in a Video Element with 10px border radius.

For privacy reasons YouTube needs your permission to be loaded.

YouTube Video in a YouTube Element

Self-Hosted Video opening in a Modal

]]> Video Element https://avada.com/documentation/video-element/ Tue, 08 Oct 2019 20:01:01 +0000 https://theme-fusion.com/?post_type=documentation&p=656009

The Video Element offers the ability for users to post self-hosted video clips easily to their Avada websites. See below for more information, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Video Element

The Video Element is easy to add anywhere in your content. Follow these simple steps below. To start, just add the element to your desired column.

Add your video file in the first option, Video MP4 Upload. You can either select one already in the media library, or upload one. You can also upload a WebM file, but this is optional.

Once you have added your video file, continue configuring the element with your preferred function and styling options.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in Avada > Options > Avada Builder Elements > Video section. Also, please not that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Video MP4 UploadAdd your MP4 video file. This format must be included to render your video with cross-browser compatibility.
Video WebM UploadAdd your WebM video file. This is optional, only MP4 is required to render your video with cross-browser compatibility.
Start TimeSpecify a start time for the video (in seconds).
End TimeSpecify an end time for the video (in seconds).
Video Max WidthSet the maximum width the video should take up. Enter value in pixel (px) or percentage (%), ex: 200px. Leave empty to use full video width.
Video ControlsControls whether the video controls should show or not.
Video PreloadingControls how / if the browser should preload the video. Choose "Metadata" if only the video metadata should be preloaded on page load (in Chrome needed for the preview image to load) or "Auto" to preload the full video on page load.
Loop VideoControls whether the video should loop or not.
Autoplay VideoIMPORTANT: In some modern browsers, videos with sound won't be autoplayed.
Mute VideoIMPORTANT: In some modern browsers, videos with sound won't be autoplayed.
Track TagsAdd track tags to the video element.
Preview ImageUpload an image to display as a video preview. IMPORTANT: In Chrome the preview image will only be displayed if "Video Preloading" is set to "Metadata".
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Overlay ColorControls the overlay color of the video element.
Border RadiusEnter values including any valid CSS unit, ex: 10px.
Box ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow ColorControls the color of the box shadow.
AlignmentSelect the video's alignment.
MarginSpacing above and below the video. Enter values including any valid CSS unit, ex: 4%.
]]> YouTube Element https://avada.com/documentation/youtube-element/ Fri, 02 Nov 2018 13:59:29 +0000 https://theme-fusion.com/?post_type=documentation&p=525835

Adding a YouTube video to your website has never been easier thanks to the Avada Builder YouTube Element. Just add the YouTube video ID, and away you go. It’s even got built in responsive features, so you don’t have to worry about the size of your videos! Read below to discover how to make the most of the YouTube Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The YouTube Element

Adding a YouTube video to your content couldn’t be easier. To start, add the element into your desired column.

Now, you have the options window open. The first and most important step is to enter the YouTube video ID into the Video ID field. This is the end section of the URL; for example, the Video ID for https://www.youtube.com/watch?v=UDyNsnB_COA is UDyNsnB_COA.

In the Alignment field, you can choose the video’s alignment in the column you place it in. Set the dimensions of the video. This is in pixels, but you just enter a number. You can enter just the width or the height, and the other value will be auto-calculated, assuming a 16:9 aspect ratio. If you have a video with a non-16:9 aspect ratio, enter both width and height.

There are a couple more options you can select. One is Autoplay, which is set to No by default, as it’s generally not considered good practice for videos to autoplay, and there is an option for additional API parameters. The most common of these is &rel=0. For a full list of YouTube parameters, please see this document. The YouTube Element also includes a Video Facade option to help with page speed. Once you have finished with the options, simply click save, and the video will be inserted into your page.

Element Options

General

HeadingDescription
Video ID or UrlFor example the Video ID for https://www.youtube.com/watch?v=CbOQqvQDrVQ is CbOQqvQDrVQ.
AlignmentSelect the video's alignment.
DimensionsIn pixels but only enter a number, ex: 600.
Start TimeSpecify a start time for the video (in seconds).
End TimeSpecify an end time for the video (in seconds).
Autoplay VideoSet to yes to make video autoplaying. Muted video required for autoplay video.
Mute VideoSet to yes to make video muted.
Additional API ParameterUse an additional API parameter, for example, &rel=0 to only display related videos from the same channel.
Title AttributeSet the title attribute for the iframe embed of your video. Leave empty to use default value of "YouTube video player #".
Video FacadeEnable video facade in order to load video player only when video is played.
Thumbnail SizeSelect the video's preview thumbnail size. The sizes are YouTube standard, and not all sizes are available for every video. Leave empty for auto selection depending on video dimensions.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Extras

HeadingDescription
Structured DataEnable video structured data for better SEO.
Upload DateSelect video upload date.
Video DurationInsert the video duration.
Video TitleInsert the video title.
Video DescriptionInsert the video description.
]]> Vimeo Element https://avada.com/documentation/vimeo-element/ Fri, 02 Nov 2018 13:58:51 +0000 https://theme-fusion.com/?post_type=documentation&p=525833

Adding a Vimeo video to your website has never been easier thanks to the Avada Builder Vimeo Element. Just add the vimeo video ID and away you go. It’s even got built in responsive features, so you don’t have to worry about the size of your videos! Read below to discover more about the Vimeo Element!

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Vimeo Element

Adding a Vimeo video to your content couldn’t be easier with the Vimeo Element. To start, simply add the element to your desired column.

Now you have the options window open. The first and most important step is to place the Vimeo video ID into the Video ID field. This is the the end section of the url; for example the Video ID for https://vimeo.com/75230326 is 75230326.

In the Alignment field, you can choose the alignment of the video in the column you are placing it in. The dimensions of the video are next. This is in pixels, but you just enter a number. Vimeo videos do not force an aspect ratio, however, the most common one is 16:9. When entering the dimensions with this element, the only really important one is the width. The video will display at its native aspect ratio.

There are a couple more options you can select. One is Autoplay, which by default is set to No, as it’s generally not considered good Netiquette for videos to autoplay, and there is an option for additional API parameters. The most common of these is &rel=0, which will disable related videos at the end of the video playing. There is also a Video Facade option, to help with page speed.

Element Options

General

HeadingDescription
Video ID or UrlFor example the Video ID for https://vimeo.com/75230326 is 75230326.
AlignmentSelect the video's alignment.
DimensionsVideo dimensions in pixels. If only one dimension is provided the video will be adjusted to 16:9 ratio.
Start TimeSpecify a start time for the video (in seconds).
Autoplay VideoSet to yes to make video autoplaying.
Mute videoSet to yes to make video muted.
Additional API ParameterUse additional API parameter, for example &rel=0 to disable related videos.
Title AttributeSet the title attribute for the iframe embed of your video. Leave empty to use default value of "Vimeo video player #".
Video FacadeEnable video facade in order to load video player only when video is played.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Extras

HeadingDescription
Structured DataEnable video structured data for better SEO.
Upload DateSelect video upload date.
Video DurationInsert the video duration.
Video TitleInsert the video title.
Video DescriptionInsert the video description.
]]> Lightbox Element https://avada.com/documentation/lightbox-element/ Tue, 09 Oct 2018 23:45:45 +0000 https://theme-fusion.com/?post_type=documentation&p=522794

The Lightbox Element is one of several media elements offered by Avada. Lightbox is also integrated into Avada for galleries and in various other areas, but the Lightbox Element is for single image or video use on any page or post. If you want to show more images, use the Gallery Element instead. Read on for an overview of this simple but very useful visual Element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Lightbox Element

The Lightbox Element is a very simple Element to use. To start, just add the element into your desired column.

At this point, you have the options window open. The first step is to choose which sort of media you wish to display. You can show images or videos in Lightbox.

The next step is to upload the full-size image. This is the image that will be displayed when you open the Lightbox. Alternatively, place the URL for the video in the field below. Then you choose the Thumbnail image. This is what will display on the page before you open the Lightbox. Finally, there is an Alt Text and a Description Field if you wish to use these, as well as a CSS Class and a CSS ID field.

Once you have finished configuring your options, remember to save your work.

Element Options

These are the element options for the Lightbox Element added through the Avada Builder. You can also add a Lightbox Element to a content area (eg. a Text Block Element), via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Inline Elements here.

Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

HeadingDescription
Thumbnail ImageClicking this image will show lightbox.
Content TypeSelect what you want to display in the lightbox.
Full ImageUpload an image that will show up in the lightbox.
Video URLInsert the video URL that will show in the lightbox. This can be a YouTube, Vimeo or a self-hosted video URL.
Link URLInsert the link URL that will show in the lightbox. This can be a link to website URL.
Alt TextThe alt attribute provides alternative information if an image cannot be viewed.
Lightbox TitleThis will show up in the lightbox as a title above the image.
Lightbox DescriptionThis will show up in the lightbox as a description below the image.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Global Options

There are no Global Options for the Lightbox Element, but the styling options found in the Global Options for Lightbox (Avada > Options > Lightbox) will affect the visual appearance of the Lightbox used by the Element. Follow the link below to read more about the Lightbox Global Options.

]]> How To Show Videos In A Lightbox https://avada.com/documentation/how-to-show-videos-in-lightbox/ Tue, 26 May 2015 18:49:00 +0000 https://theme-fusion.com/documentation/videos-in-lightbox/

The lightbox we use in Avada is called iLightbox and it is compatible with Youtube, Vimeo and self-hosted videos. The Lightbox can be triggered from the Lightbox Element, but also in many other places thoughout Avada. Read on for more information on where and how you can show videos in a Lightbox in Avada.

Locations You Can Show Videos In A Lightbox

  • Lightbox Element – The Lightbox Element can be added directly in the page builder, through the Avada Builder Elements list, or through the Element Generator in a text editor.
  • Columns – You can add a video link to a column and then choose the Lightbox option under Link Target.
  • Button Element – You can launch a YouTube, Vimeo or self-hosted video in a Lighbox through the Button Element.
  • Portfolio Posts – Each portfolio post has a Video URL For Lightbox field in the Avada Page Options, that allows a video to be loaded in a Lightbox. The video is triggered by the Zoom icon on the Portfolio item thumbnail.
  • Add Media To Page/Post – Any image inserted onto a page can open in a lightbox to play a video or show another image.

How To Link Videos In Columns

Step 1 – Edit the column you’d like to link a video to, or create a new one.

Step 2 – In the Column options, set a video URL in the Link URL field.

Step 3 – In the Link Target option below this, choose Lightbox from the options.

Step 4 – That’s it. Your entire column is now a link and the video will open in a lightbox when the column is clicked.

How To Insert Videos In The Lightbox For Portfolio Posts

Step 1 – Open the portfolio post you’d like to add a video to, or create a new one.

Step 2 – In the Avada Page Options, locate the ‘Video URL for Lightbox‘ field and paste your video’s link URL. For example, https://vimeo.com/63534746. You can insert both Youtube/Vimeo videos and self-hosted videos.

Step 3 – Once you’re finished making changes, click Save Draft or Publish/Update.

The video is triggered by the Zoom icon on the Portfolio item thumbnail.

Portfolio Video URL Page for Lightbox Option

How to Launch a Video through the Lightbox Element

  • Step 1 – Add the Lightbox element to your page through the Avada Builder.
  • Step 2 – Select “Video” as the Content Type” for your Lightbox element.
  • Step 3 – Now add your video’s full URL in the Video URL text field.
  • Step 4 – Select a thumbnail image which will launch the video when clicked.
Lightbox Element Video URL option

How to Launch a Video through the Button Element

You can also launch a YouTube or Vimeo video in a Lightbox through the Avada Builder Button element.

  • Step 1 – Add a button Element to your page/post content and then add the video URL to the Button URL setting.

  • Step 2 – Next, in the Button Target field, choose Lightbox.

  • Step 3 – Now save your settings and update the page. Clicking the button on the frontend will launch your video in the Lightbox.

Button Element > Button URL option

How To Insert Videos In The Lightbox For Regular Media

Step 1 – Open the page or post you’d like to add a video to, or create a new one.

Step 2 – Click the Insert/Edit Link button in the top row of the page editor, just after the alignment buttons.

Step 3 – Click the Link Options (the cog icon) and paste your video’s link URL in the URL field. For example, https://vimeo.com/63534746. Add your Link Text in the Link Text field below this.

Step 4 – Once you’ve inserted the link URL, click the Add Link button on the lower right corner.

Step 5 – After you insert the video, you must add rel=”iLightbox” to the link tag. As an example, please refer to the image below.

Adding videos in Lightbox in the WordPress Editor

How To Set Video Size in Avada Global Options

Step 1 – Navigate to the Avada > Options tab.

Step 2 – Go to the Lightbox tab, and locate the Slideshow Video Width and Height options. Set the width and height of your video by entering a pixel value into the corresponding setting. For example,1280px for the width and 720px for the height.

Theme Options in Lightbox

Common Issues or Questions

My Youtube or Vimeo video is too large!

This issue is because you’re using the embed URL instead of the link URL.

]]> How To Use The Lightbox https://avada.com/documentation/how-to-use-the-lightbox/ Mon, 13 Apr 2015 14:35:17 +0000 https://theme-fusion.com/documentation/ilightbox/

Lightbox is an Avada option that allows you to open beautiful, responsive overlay windows, containing images or videos. Below you’ll find a description on each Avada Global Option available for the Lightbox, as well as the Lightbox Skins, the Lightbox Element, and the other elements that utilize the Lightbox.

For privacy reasons YouTube needs your permission to be loaded.

Lightbox Global Options

The Global Lightbox Options are found in the Global Options at Avada > Options > Lightbox. These options affect the way Lightbox works across the site.

Lightbox – Allows you to enable or disable the Lightbox across your site. Choose between Yes or No.

Lightbox For Featured Images On Single Post Pages – Turn on to enable the lightbox on single blog and portfolio posts for the main featured images.

Lightbox Behavior – Allows you to set what the Lightbox will display for portfolio and blog posts. Choose between First Featured Image of Every Post, or Only Featured Image of Individual Post.

Lightbox Skin – Allows you to set a Lightbox skin. Choose between Light, Dark, Mac, Metro Black, Metro White, Parade or Smooth. See below for examples of the various skins.

Thumbnails Position – Allows you to set the position of the thumbnails in the Lightbox. Choose between Right or Bottom.

Animation Speed – Allows you to set the animation speed. Choose between Fast, Slow or Normal.

Arrows – Allows you to enable or disable navigation arrows. Choose from Yes or No.

Gallery Start/Stop Button – Allows you to enable or disable the gallery start/stop button. Choose from Yes or No.

Autoplay The Lightbox Gallery – Allows you to enable or disable the Lightbox gallery’s autoplay feature. Choose from Yes or No.

Slideshow Speed – Allows you to enter a numerical value that sets the slideshow speed if the ‘Autoplay The Lightbox Gallery’ option is enabled. For example, 1000 = 1 second.

Background Opacity – Allows you to enter a numerical value that sets the background opacity. For example, 0.00 (transparent) or 1.00 (opaque).

Title – Allows you to enable or disable image titles in the Lightbox. Choose from Yes or No.

Caption – Allows you to enable or disable the image captions in the Lightbox. Choose from Yes or No.

Social Sharing – Allows you to show or hide the social sharing button on the images in the Lightbox. Choose from Yes or No.

Deeplinking – Allows you to enable or disable deep linking image in the Lightbox. Choose from Yes or No.

Show Post Images In Lightbox – Turn on to display post images in the Lightbox that are inside the post content area. Choose from Yes or No.

Slideshow Video Dimensions – Accepts a pixel value that lets you control the width and height of videos inside the Lightbox. For example, 1280px x 720px.

Lightbox Skins

The Lightbox comes with a choice of seven skins – Light, Dark, Mac, Metro Black, Metro White, Parade, & Smooth. These are set in the Global Options at Avada > Options > Lightbox > Lightbox Skin. You can see an example of each style below.

Light

Lightbox Skin - Light

Dark

Lightbox Skin - Dark

Mac

Lightbox Skin - Mac

Metro Black

Lightbox Skin - Metro Black

Metro White

Lightbox Skin - Metro White

Parade

Lightbox Skin - Parade

Smooth

Lightbox Skin - Smooth

Lightbox Element

The Lightbox Element is added through the Avada Builder. You can also add a Lightbox Element to a content area (eg. a Text Block Element), via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Inline Elements here. For full details on the Lightbox Element, please follow the link below.

Other Elements With Lightbox Options

Image Element

In the Image Element, you can choose to upload and display an image in a lightbox, different from the image you choose to display inside the Image Frame. To enable that, simply select Yes on the Image Lightbox option. To upload a different display image to display on the lightbox, click the Upload button in the Lightbox Image field and select an image from your Media Library or upload a new one. You can also add images added via the Image Element to a Lightbox Gallery by linking them with the same Gallery ID.

Image Element - Lightbox Option

Image Carousel Element

In the Image Carousel Element, you can choose to display your images in a lightbox. To display images in a lightbox, simply select Yes on the Image Lightbox option.The Image Carousel Element will display your images in the Lightbox at the size they are uploaded. Avada uses an appropriate sized image for the carousel thumbnails. For more information on this, please see the How Avada Controls Responsive Images doc.

Image Carousel Element - Lightbox Option

Gallery Element

The Gallery Element uses the lightbox by default. The Gallery will display your images in the Lightbox at the size they are uploaded. Avada uses an appropriate sized image for the gallery thumbnails. For more information on this, please see the How Avada Controls Responsive Images doc.

Gallery Element - Lightbox Option

Post Slider Element

In the Post Slider Element, you can choose to display images in a lightbox, only if the Post Slider is set to the Attachment layout. To enable that, select Yes on the Lightbox on Click option.

Post Slider Element - Lightbox Option

Slider Element

In the Slider Element, you can choose to display your slider images in a lightbox. To enable that, select Yes to the Lightbox option in each slider item tab.

Slider Element - Lightbox Option
]]> How to Create Self-Hosted Videos https://avada.com/documentation/how-to-create-self-hosted-videos/ Tue, 24 Feb 2015 16:38:14 +0000 https://theme-fusion.com/documentation/adding-self-hosted-videos/

Aside from images and text, videos are a great way to showcase content on your website. Avada offers many ways for videos to be loaded into your site, including YouTube, Vimeo and self-hosted videos.

Self-hosted videos require a few steps to create and can use a few file formats per video. This step by step article will cover the various file formats of self hosted videos, how to make the required and optional file formats, areas of Avada that can use the videos, and how to use the videos in those areas.

A Self Hosted Video Consists of 4 File Formats

  • .MP4 – A required file format for uploading self-hosted videos. This file works in all major browsers.

  • .WEBM – This format is growing in popularity, but is an optional file format with self-hosted videos.

  • .OGV – Another optional file format for self-hosted videos.

  • Video Preview Image – The image that will be seen in place of your video on older browsers or mobile devices.

The Only Required Format is MP4

As mentioned above, mp4 is the only required video format for self-hosted videos. WebM and .ogv are optional formats.

The steps below assume that you already have a video to use. Videos come in many different formats, so the idea is that you need to convert your current video format to MP4 and WEBM files, which can then be uploaded and used on your website.

How To Create A MP4 File

Step 1 – After creating your video, make sure to save it in .MP4 format. The video should also be in 16:9 Aspect Ratio.

Step 2 – If you are unable to save your video in .MP4 format, you must convert it to .MP4 format via a 3rd party software, like Handbrake. Please see the links below for information on how to do this.

View Handbrake documentation.

How To Create A WEBM File

Step 1 – Once you have a video in .MP4 format, if you wish, you can also convert it to .WEBM format. You can do this with Media.io.

Step 2 – If you choose to use Media.io, you can simply upload your .MP4 video and it will automatically convert it to .WEBM format.

Areas You Can Use Self-Hosted Videos

  • Video Element – This Element is specifically designed for you to add self-hosted videos into your content.

  • Containers – Using the Avada Builder Container Element, you can set a self-hosted video as the background.

  • Avada Slider – Using the Avada Slider, you can insert self-hosted videos into your slides.

  • Layer Slider – Using the Layer Slider, you can insert self-hosted videos into your slides.

  • Revolution Slider – Using the Revolution Slider, you can insert self-hosted videos into your slides.

  • Anywhere Lightbox is used – Lightboxes can show self-hosted videos, and they can be triggered from the Column, Button and Lightbox Elements, and in the Portfolio Page Video URL for Lightbox option. For more information on using videos in Lightbox, please see How To Show Videos In A Lightbox.

How To Upload Your Video File(s)

Once you have your video as an .MP4 file, you’re now ready to upload it.

Step 1 – Choose the area of the site you want to use self-hosted videos. Each area described above has slightly different upload methods, but all accept .mp4 files.

Step 2 – In your chosen area, simply upload the correct file format to the correct field. For example, upload the .MP4 file format to the .MP4 Upload field. There will be a field for the required file format, and in some cases, fields for the optional videos as well.

Step 3 – If there is just a simple text field with no video uploader button, like in the Container Element, you will need to upload the file to the Media Section and then copy and paste the URL.

Step 4 – If your media files are too big to upload through the Media Manager, you will need to update your server settings, or upload them to your server via FTP.

Adding Self-Hosted Videos
]]> Licensing For Stock Images & Videos Used In Avada Prebuilt Websites https://avada.com/documentation/licensing-for-stock-images-videos-used-in-avada-prebuilt-websites/ Thu, 17 Oct 2013 01:23:11 +0000 https://theme-fusion.com/documentation/how-to-get-stock-images-used-on-our-demo/

The licensing for Avada does NOT include the images or videos used in the Prebuilt Websites or the Avada Studio content blocks. With Avada Studio, we have sourced the images used from free sources, but it is still the user’s responsibility to ensure that all images are being used according to their copyright status.

Avada Studio Content

Follow the link below to see an extensive list of the media resources used in Avada Studio. From here, you can check the copyright status and conditions of the specific images in question. Please note, the sources have dates next to them as image website listings can change, and this list will not be maintained/updated by us.

Prebuilt Websites

Our prebuilt websites use a variety of both paid and free stock images and videos, and below we have a list of resources that can help you source either free or paid stock images for your site. Always make sure you read the details of each resource to fully understand the license it comes with.

General Stock Photos

Stock Videos

Graphics & Mockups

]]> YouTube Video Parameters https://avada.com/documentation/youtube-video-parameters/ Fri, 13 Sep 2013 20:23:13 +0000 https://theme-fusion.com/documentation/how-to-use-youtube-video-parameters/

YouTube offers a lot of parameters, that you can use in the video embed code, to have full control over your videos. Below are some links and a list of these parameters. All of the player controls for any YouTube player can be found in this Reference Doc.

list of Parameters:

This parameter specifies whether the initial video will automatically start to play when the player loads. Supported values are 0 or 1. The default value is 0.

This parameter specifies the default language that the player will use to display captions. Set the parameter’s value to an ISO 639-1 two-letter language code.

If you use this parameter and also set the cc_load_policy parameter to 1, then the player will show captions in the specified language when the player loads. If you do not also set the cc_load_policy parameter, then captions will not display by default, but will display in the specified language if the user opts to turn captions on.

Setting the parameter’s value to 1 causes closed captions to be shown by default, even if the user has turned captions off. The default behavior is based on user preference.

This parameter specifies the color that will be used in the player’s video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white, and, by default, the player uses the color red in the video progress bar. See the YouTube API blog for more information about color options.

This parameter indicates whether the video player controls are displayed:

  • controls=0 – Player controls do not display in the player.
  • controls=1 (default) – Player controls display in the player.

Setting the parameter’s value to 1 causes the player to not respond to keyboard controls. The default value is 0, which means that keyboard controls are enabled. Currently supported keyboard controls are:

  • Spacebar or [k]: Play / Pause
  • Arrow Left: Jump back 5 seconds in the current video
  • Arrow Right: Jump ahead 5 seconds in the current video
  • Arrow Up: Volume up
  • Arrow Down: Volume Down
  • [f]: Toggle full-screen display
  • [j]: Jump back 10 seconds in the current video
  • [l]: Jump ahead 10 seconds in the current video
  • [m]: Mute or unmute the video
  • [0-9]: Jump to a point in the video. 0 jumps to the beginning of the video, 1 jumps to the point 10% into the video, 2 jumps to the point 20% into the video, and so forth.

Setting the parameter’s value to 1 enables the player to be controlled via IFrame Player API calls. The default value is 0, which means that the player cannot be controlled using that API.

For more information on the IFrame API and how to use it, see the IFrame API documentation.

This parameter specifies the time, measured in seconds from the start of the video, when the player should stop playing the video. The parameter value is a positive integer.

Note that the time is measured from the beginning of the video and not from either the value of the start player parameter or the startSeconds parameter, which is used in YouTube Player API functions for loading or queueing a video.

Setting this parameter to 0 prevents the fullscreen button from displaying in the player. The default value is 1, which causes the fullscreen button to display.

Sets the player’s interface language. The parameter value is an ISO 639-1 two-letter language code or a fully specified locale. For example, fr and fr-ca are both valid values. Other language input codes, such as IETF language tags (BCP 47) might also be handled properly.

The interface language is used for tooltips in the player and also affects the default caption track. Note that YouTube might select a different caption track language for a particular user based on the user’s individual language preferences and the availability of caption tracks.

Setting the parameter’s value to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default. The default value is 1.

The list parameter, in conjunction with the listType parameter, identifies the content that will load in the player.

 

  • If the listType parameter value is user_uploads, then the list parameter value identifies the YouTube channel whose uploaded videos will be loaded.
  • If the listType parameter value is playlist, then the list parameter value specifies a YouTube playlist ID. In the parameter value, you need to prepend the playlist ID with the letters PL as shown in the example below.
     
    https://www.youtube.com/embed?
        listType=playlist
        &list=PLC77007E23FF423C6
  • If the listType parameter value is search, then the list parameter value specifies the search query. Note: This functionality is deprecated and will no longer be supported as of 15 November 2020.

Note: If you specify values for the list and listType parameters, the IFrame embed URL does not need to specify a video ID.

The listType parameter, in conjunction with the list parameter, identifies the content that will load in the player. Valid parameter values are playlist and user_uploads.

If you specify values for the list and listType parameters, the IFrame embed URL does not need to specify a video ID.

Note: A third parameter value, search, has been deprecated and will no longer be supported as of 15 November 2020.

In the case of a single video player, a setting of 1 causes the player to play the initial video again and again. In the case of a playlist player (or custom player), the player plays the entire playlist and then starts again at the first video.

Supported values are 0 and 1, and the default value is 0.

Note: This parameter has limited support in IFrame embeds. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:

https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1

This parameter provides an extra security measure for the IFrame API and is only supported for IFrame embeds. If you are using the IFrame API, which means you are setting the enablejsapi parameter value to 1, you should always specify your domain as the origin parameter value.

This parameter specifies a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO_ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter.

This parameter controls whether videos play inline or fullscreen on iOS. Valid values are:

 

  • 0: Results in fullscreen playback. This is currently the default value, though the default is subject to change.
  • 1: Results in inline playback for mobile browsers and for WebViews created with the allowsInlineMediaPlayback property set to YES.

Note: This parameter is changing on or after September 25, 2018.

Prior to the change, this parameter indicates whether the player should show related videos when playback of the initial video ends.

  • If the parameter’s value is set to 1, which is the default value, then the player does show related videos.
  • If the parameter’s value is set to 0, then the player does not show related videos.

After the change, you will not be able to disable related videos. Instead, if the rel parameter is set to 0, related videos will come from the same channel as the video that was just played.

This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. The parameter value is a positive integer. Note that similar to the seekTo function, the player will look for the closest keyframe to the time you specify. This means that sometimes the play head may seek to just before the requested time, usually no more than around two seconds.

This parameter identifies the URL where the player is embedded. This value is used in YouTube Analytics reporting when the YouTube player is embedded in a widget, and that widget is then embedded in a web page or application. In that scenario, the origin parameter identifies the widget provider’s domain, but YouTube Analytics should not identify the widget provider as the actual traffic source. Instead, YouTube Analytics uses the widget_referrer parameter value to identify the domain associated with the traffic source.

]]>