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 |