Introducing the newest addition to JD Builder element library, the Video Element. One of the most powerful & useful element that you might need on your webpage, where one can embed videos from YouTube, Vimeo, DailyMotion or your own server. The element is optimized for website loading speed.
A quick preview of the element is here.
Similar to other elements all the configuration options are under the main General tab.
Firstly we have the General tab where you can add the type of video you want:
- Type- Choose you video type you wish to show either a youtube, vimeo or a daily-motion video or you can upload a video from your own server.
- Link- If you choose youtube, vimeo or a daily-motion then add their respective links here.
Next is Video Options tab that has the common options for any video type chosen:
- Video Size- Set the size of the video with respect to the page’s content.
- Controls- Enable or disable to show the video controls while one plays the video.
- Autoplay- Enable or disable auto play for the video.
- Muted- Keep the video muted by default.
- Loop- Enable to play the video on loop.
- Thumbnail- Enable to add a thumbnail to the video.
- Custom thumbnail- Add the custom thumbnail image here.
- Overlay Color- Add an overlay color to the image. (optional)
- Lightbox- When you add a custom thumbnail image then you can choose to play the video with the lightbox effect.
- Lightbox Content Width- If lightbox is enabled then adjust the width of the video playing in the lightbox.
Next tab depends upon the video type chosen, if video type is Youtube then we have YouTube Options tab that has these options:
- Start Time & End Time- Set the start & end time for a youtube video.
- Thumbnail Size- If there is no custom thumbnail then manage the size of the default youtube video thumbnail.
- Modest Branding- Enable it to hide the youtube branding from the videos.
- Privacy Mode- Enable it to start the privacy mode for the video.
- Suggested Videos- Enable it to show videos other than those of the same channel.
You can also style the subscribe bar along with the youtube video under Subscribe Bar Options tab:
- Subscribe Bar- Enable it to show the subscribe bar and customize it.
- Youtube Channel- Choose channel via name or ID.
- Channel ID/Name- Depending upon the channel enter either its ID or the name(referenced in the link).
- Layout- Choose subscribe bar layout default button or the full layout with name and other details.
- Subscriber Count- Enable it to show the subscriber count of the channel.
- Subscriber Text- Enter a custom subscriber text in the bar.
- Bar Text & Background Color- Style the bar & its text by adding colors.
- Bar Typography- Style the text in different fonts & styles & weights.
- Bar Padding- Adjust the bar padding.
- Spacing- Add space between the subscriber text & channel details.
If your video type is vimeo then you have these options under Vimeo Options tab:
- Intro Byline- As per the default vimeo video load, show or hide the byline below the title.
- Intro Portrait- Enable it to show the Intro portrait.
- Intro Title- Enable it to show the video title.
- Control’s Color- Set the colors of the vimeo video controls.
If your video type is dailymotion then you have these options under Dailymotion Options tab:
- Dailymotion Logo- As per the default dailymotion video load, show or hide its logo here.
- Video Info- Show or Hide the video info alongside the default play button.
If you enable & add a custom thumbnail to the video then you are open to styling the play button over it under Play Button tab:
- Type- Choose the play button type default, icon or image or simply none.
- Size- Adjust the size of the play button with respect to the thumbnail.
- Color Options- If you choose default or icon type play button then add colors to them.
- Border Options in Normal State- Style the border of these play buttons when in normal state.
- Border Options in Hover State- Style the border of these play buttons when in hover state along with adding animations.
Play your video along side reading the content of the page by making the video sticky, which can be configured under Sticky Video tab:
- Sticky- Enable or disable to show the video as sticky or not on a web-page. If you enable it, you have the following listed options available.
- Sticky Width- Adjust the width of the sticky video on the page.
- Sticky Position- Choose the position of the sticky video with respect to the page content.
- Spacing from Edges- Give spacing from the edges of the screen.
- Background Size- Adjust the background size of the sticky video.
- Color Options- Add background color & close button color for the sticky video.
- Hide Sticky Video On- Choose where to enable/disable the sticky video on different devices.
