Responsive Embedding of Videos

Embedded videos can be made responsive by applying the Bootstrap utility classes embed-responsive and embed-responsive-{ratio} to the parent of the video element and embed-responsive-item to the video element itself.

This gives the parent element an intrinsic ratio that will scale the height based on its width.

The ratio options are:

21by9
16by9
4by3
1by1

Further information on bootstrap’s responsive embedding can be found here.

Steps

Create a Form with a Bootstrap4 Presentation Template.

Create a Panel Control and give it the classes embed-responsive and embed-responsive-16by9.

Create a HTML Control with the following content:

<iframe class=”embed-responsive-item” src="https://www.youtube.com/embed/c-ptvXgUfdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Run the form and change the size of the browser to observe the behaviour at different screen sizes.

Previous Page Next Page