Modal Video
A modal window used to display a responsive video (or iframe).
Projects /
Projects /
A modal window used to display a responsive video (or iframe).
The Modal Video component is used to embed responsive videos or iframe elements (e.g., YouTube videos).
To connect the modal to its trigger (e.g., button), make sure the ID value of the modal is equal to the aria-controls value of the button.
In addition to the aria-controls, the trigger element needs to have a data-url attribute equal to the URL of the embedded content.
For Youtube and Vimeo videos, here's the URL format:
https://player.vimeo.com/video/nnnnnnnn
https://www.youtube.com/embed/nnnnnnnnwhere nnnnnnnn is the unique video id (you would need to replace it with your content id).
You can use a single .modal element for multiple videos (multiple trigger buttons). The content of the modal will be automatically updated based on the value of the trigger data-url attribute.
We used, as trigger for the video modal element, an <a> element with a role of button. This way, if JavaScript is disabled, you can redirect the user to a page showing the video.
⚠️ Note: according to the Chrome Autoplay Policy, it is not possible, on Chrome, to autoplay a not-muted video inside the modal (the user has to interact with the video for it to start).
If you have a muted video that you wish to autoplay when launching the video modal, make sure to add ?autoplay=1&mute=1 to the video URL.
For a Youtube video, it would look like:
https://www.youtube.com/embed/nnnnnnnn?autoplay=1&mute=1🎥 Demo video by Ruvim Miksanskiy from Pexels.
