Documentation

Categories
< All Articles
Print

YouTube Video Embed

YouTube Video Embed

Adding the Module

Once Avatar Divi is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit a row.
  3. Click on Add New Module option; choose the Avatar YouTube Video Embed module.

Content Options

Video

Important: If the same YouTube Video or Playlist ID is used within the same page, only one will render. IDs are unique identifiers and they should only be used once per page and not duplicated. These are the available options:

  1. YouTube Video or Playlist ID: Enter the YouTube video ID. If it is a Video, the ID is the value after 'v=' in the video URL. If it is a Playlist the ID is the value after 'list=' in Playlist URL.
  2. Is it a Playlist?: Choose whether the ID entered above is a for single Video or a Playlist.
Play Button Hover Effects
  1. Hover Effects: Choose the hovered animation effect of your Play button. Depending on what animation hover effect is selected you will be able to set individual settings for that specific animation. These are the options per animation type:

    Shrink & Grow

    1. Hover Animation Speed: Enable to choose a custom animation speed for the Play button.
      1. Speed: Set the animation speed for the Play button if Hover Animation Speed is ENABLED.

    RubberbandBounceFlashJelloWobblePulseTadaShakeSwingShockwaveHeartbeat on HoverContinuous Heartbeat

    1. Hover Effect Animation Iteration Count: How many times the animation should be played when hovered.
    2. Hover Animation Duration: Enable to choose a custom animation duration for the Play button.
      1. Duration: Set the animation duration for the Play button if Hover Animation Duration is ENABLED.

    Heartbeat on Hover & Continuous Heartbeat

    1. Effect Color: Set the color of your Heartbeat effect.
Video Cover
  1. Use Custom Video Cover Image: Choose whether to use the default YouTube video thumbnail for the Video Cover cover or not. If it is set to NO, the YouTube video thumbnail image will overwrite the Background image set below.
    1. Video Cover Background: If Use Custom Video Cover Image is ENABLED you will be able to create a custom Video Cover using the default Background options provided by the Visual Builder.
  2. YouTube Thumbnail Size: Choose the YouTube thumbnail size. If a video cover does not show up it may be possible that a default cover has not been for that video on YouTube. Depends on Use Custom Video Cover Image is set to DISABLED and can only be used for Single Videos not for Playlists.
  3. Video Cover Background Gradient: With this option you will be able to combine the default YouTube Video Cover with a Gradient Background like you would normally do with the standard Background Options provided by the Visual Builder. Depends on Use Custom Video Cover Image is set to DISABLED.
Video Cover Hover Effects
  1. Enable Test: Enable to help you to customize the Play button and Video Cover hover effects.
  2. Fade: Choose whether the Video Cover should fade out when hovered. The following options are available once ENABLED:
    1. Opacity: Change the hovered Fade opacity of your Video Cover.
    2. Fade Tint Color: Set the hovered tint backdrop color of the Video Cover. This will only show if you lowered the opacity of the Video Cover when hovered above.
  3. Rotate: Choose whether the Video Cover rotates when hovered. The following options are available once ENABLED:
    1. Direction: Select the rotation direction of the Video Cover when hovered: LEFT or Right
    2. Angle: Select the hovered rotation angle of the Video Cover.
  4. Scale: Choose whether the Video Cover scales when hovered. The following options are available once ENABLED:
    1. Scale Size: Set the scale size of the Video Cover when hovered.

The default Divi Builder Module Background and Admin Label are also available for this module.

Design Options

Player
  1. Divi Builder Default: Default Round Corners and Border Styles options provided by the Visual Builder.
Play Button Container • Play Button

Each of the settings below applies to each option respectively and it will only affect that specific section.

  1. Width: Set the width of the Play Button Container.
  2. Height: Set the height of the Play Button Container.
  3. Background Color: Set the background color of the Play Button Container.
  4. Divi Builder Default: Default Round Corners, Border Styles and Box Shadow options provided by the Visual Builder.
Play Button Icon
  1. Use Custom Icon: Choose whether to use a custom icon for your Play button or not. ENABLE to set a custom Icon for you Play Button.
  2. Icon Size: Set the size of the Play Button Icon.
  3. Icon Color: Set the color of the Play Button Icon.
Progress Bar
  1. Progress Bar Color: 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 red in the video progress bar.
Heartbeat Border
  1. Divi Builder Default: Default Round Corners and Border Styles options provided by the Visual Builder.
Other Options
  1. Divi Builder Default: Default Sizing, Spacing, Border Styles, Box Shadow, Filters, Transform, and Animation provided by the Visual Builder.
p
Note

Default settings, sub-settings, and options used in all Divi Builder Modules are not described or included in our documentation and they are referred as Divi Builder Default throughout our guides to indicate that the options included are those provided by default by/or in the Visual Builder. If you need help learning to work with Divi Visual Builder, please visit Elegant Themes Documentation.

If you still stuck
Table of Contents