Video Sections

Layout Demo URL: https://diviwp.com/ui/sections/video-sections/all-video-sections/

Video Sections contain Video Modules and a combination of Text Modules and/or Blurb Modules and Image Modules. Videos of your product, services, customers, demos or testimonials are huge credibility building blocks.

Editing the demo content

Each DiviWP Section can be edited using the Visual Builder.

You can make your changes to various module settings, upload new images, change colors, toggle between the desktop, tablet and mobile views and publish your page to achieve the look in the demo.

In some sections outlined below, Custom CSS is necessary to achieve a desired affect or an optimal responsive user experience and where the Divi Builder was unable to do it with it's Module settings alone.

Why Custom CSS is used in Sections

Divi is an incredible builder and you can certainly do a ton of things with its built-in settings.

We're sure we'll see the introduction of even more new settings in time, but for now, we believe it does not (yet) have the ability to configure the necessary settings to create a particular interface design or effects.

So by including Custom CSS in a seperate Code Module or labeled within the Row, Column or Module, you can learn how we've used various CSS properties to achieve a desired effect.

How to view Custom CSS

When you are editing in the Visual Mode and building on the front-end of your website, Custom CSS Code Modules or Custom CSS configured within a Row, Column or Module is not visible.

Accessing the Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure. Learn more about Layer View and Wireframe mode.

Custom CSS in use in sections (scroll down for in-depth documentation)

Video Section 1 - Video Module
Video Section 2 - Video Module
Video Section 13 - Video Module
Video Section 14 - Video Module
Video Section 15 - Video Module
Video Section 16 - Video Module

Support is always on hand

You can rest assured that support is always on-hand and we'll be able to guide you as far as possible should you require assistance with any custom CSS we have included in our layouts, templates or sections.

Video Sections 1 and 2 - Video Modules

Let's look at the above section via the Layer View below.

The Video Module labeled "Video .diviwp-video-height-100" is describing:

A Video Module
With a custom class name diviwp-video-height-100 (You can view this in Module Settings → Advanced → CSS ID and Classes)

Below the Video Module you'll a see Code Module labeled "CSS Code for .diviwp-video-height-100 to make video 100% height for screen sizes 980px - 1310px".

The Code Module admin label is describing what the CSS properties within it's module are targeting and describes what it is used for.

In this case, the code module contains CSS that is targeting the classname .diviwp-video-height-100 and applying CSS properties to maintain the video height 100% to it's parent column, thereby preserving the "card" design of the row at various responsive breakpoints.

Here's an example of this in action at 1055px screen width:

Notice how the video takes up 100% of the "card" row while maintaining it's proportions. It looks like one card of grouped information.

If we removed the CSS Code Module, here's what the row would look like at 1055px screen width:

Without the custom CSS, the video does not scale vertically proportionately. It will still be usable but this doesn't make the design feel quite as "polished".

Video Section 13 and 16 - Video Modules

Accessing the Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure.

Let's look at the above example via the Layer View:

The Video Module is labeled "Video .diviwp-video-14-height-100" is describing:

A Video Module
With a custom class name diviwp-video-14-height-100 (You can view this in Module Settings → Advanced → CSS ID and Classes)

Below the Video Module you'll a see Code Module labeled "CSS Code for .diviwp-video-14-height-100 to make video 100% height for screen sizes 980px - 1310px"

The Code Module admin label is describing what the CSS properties within it's module are targeting and describes what it is used for.

In this case, the Code Module contains CSS that is targeting the classname .diviwp-video-140height-100 and applying CSS properties to maintain the video height 100% to it's parent column, thereby preserving the "card" design of the row at various responsive breakpoints.

Here's an example of this in action at 1027px screen width:

Notice how the video takes up 100% of the "card" row while maintaining it's proportions.

If we removed the CSS Code module, here's what the row would look like at 1055px screen width: