To create a responsive video embed, wrap the iframe or a <video> element with a div that has specific classes. This ensures the video adapts to different screen widths, adjusting its size accordingly.
Note about YouTube Embeds: Users who reject cookies will not be able to view YouTube videos unless the “no cookie” embed code version is utilized. To create the “no cookie” embed version, follow these steps:
- When generating the embed code on the YouTube website, select the “enhanced privacy mode.”
- If you already have the embed code in a Joomla article or module, simply replace “youtube.com” with “youtube-nocookie.com.” The rest of the embed code remains unchanged.
Example
The most common video ratio is 16x9. If your video is a different ratio, use the table below to find the right classes to use on the div surrounding your iframe or <video> element.
| 1x1 | 4x3 | 16x9 | 21x9 | |
|---|---|---|---|---|
| Classes | ratio ratio-1x1 | ratio ratio-4x3 | ratio ratio-16x9 | ratio ratio-21x9 |
Controlling the Size of a Video
The video will scale to fit its parent container while maintaining the aspect ratio (using the ratio classes above). To make the video occupy less space, apply a max-width utility such as tw-max-w-lg or tw-max-w-2xl. The tw-mx-auto class centers the video; remove it if you don’t want it centered.
Large
Extra Large