Skip to main content

Full Screen Video

Take your content to the next level by adding a Full Screen Video block to your article. With this block, you can include a headline and a cover image to display before the user plays the video. You can even add a backdrop image with portrait and landscape versions, along with an image description.

Desktop

Full Screen Quote Desktop Preview Screenshot

Mobile

Full Screen Quote Mobile Preview Screenshot

Add a Full Screen Video Block​

Configure your full screen video wit the following settings and options.

Customize Your Video​

Title: Enter your title to optimize your video for SEO.

Summary: Provide a short description of your video for SEO purposes.

Video: Upload your video file here.

Subtitles: Upload your subtitle document in VTT format.

Cover Image: Upload an image to display on top of the video.

Images​

Landscape Image: Add a landscape image to your block with a maximum resolution of 2560 x 1456 pixels. Images are automatically resized to fit that proportion.

Portrait Image: Add a portrait image to your block with a maximum resolution of 1456 x 2560 pixels. Images are automatically resized to fit that proportion.

Gif Animation: If you have a GIF that you want to use as your background image, you can enable this feature to animate your GIF. You can choose between none or automatic. Enabling the gif animation disables automatic image resizing.

Desktop Tiling: Allows you to choose between 'Automatic' and 'Contain' to toggle between different tiling styles for the background image on desktop devices.

Mobile Tiling: Allows you to choose between 'Automatic' and 'Contain' to toggle between different tiling styles for the background image on mobile devices.

Scroll Style: Choose between normal or fixed. Enabling the fixed option creates a desktop-only parallax effect. Note that this option has no effect on mobile browsers because they do not support it.

Image Description: Add a description to your image for SEO and accessibility.

Special Effects​

Geometry: Allows for the change of the shape of the block. Choose from bevel, circle, hexagon, left arrow, right arrow, parallelogram, pentagon, rabbet, rectangle, triangle up, and triangle down.

Filter: Add a filter to your entire element, such as blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, or sepia. This applies a filter animation to the entire element.

Transition: Add an interactive on-scroll transition effect to your entire element, such as Perspective, Rotate, Scale-Bounce, Scale, Translate horizontally, or Translate vertically.

Desktop Overflow: Allows for the desktop content to overflow to the next element.

Mobile Overflow: Allows for the mobile content to overflow to the next element.

Display on Mobile: Choose whether or not to display this element on mobile devices.

CSS Snippet: Use a CSS Snippet to fully customize your element for a more personalized look.