Video Embed Block

YouTube video with custom cover

YouTube video with custom start time

Settings

This section will help you set up the video embed block. Let’s take a look at the available options.

  1. Cover Image: Choose a cover image which will be displayed before the playback starts.
  2. Show Controls: Show or hide the video playback controls.
  3. Enable Autoplay: If enabled the video will begin playing automatically when the page loads. (does not work on mobile devices).
  4. Mute: If enabled the video will be muted by default.
  5. Loop: If enabled the playback will restart when the video reaches its end.
  6. Modest Branding: If enabled makes YouTube branding more discreet.
  7. Lazy Load: If enabled video assets will only be loaded once playback is initiated and not on page load.
  8. Stick to bottom on scroll: If enabled, the video will stick to the bottom corner of the view port and keep playing once the user scrolls past it.
  9. Start time in seconds: Set a custom timestamp to start the video playback from.
  10. End time in seconds: Set a custom timestamp as the video’s end.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

  1. Background Color: Controls the color of the block’s background.
  2. Border: This option allows you to select the border style via the drop down and then select the border color and width.
  3. Border Radius: This option allows you to round the block’s corners.
  4. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
  5. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
  6. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.


Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.