Was this page helpful?
Videos¶
You can embed videos in your documentation using iframes. This is particularly useful for YouTube videos or other video hosting platforms.
Basic iframe¶
To embed a video using an iframe, use the raw directive with HTML content.
.. raw:: html
<iframe width="560" height="315" style="max-width: 100%; margin-bottom: 1rem;" src="https://www.youtube.com/embed/-nPO9KeNydM?si=nE0Tpy7wM8D6fFYU"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
Renders as:
Responsive iframe¶
To make the iframe responsive and take the full width of the container while maintaining the aspect ratio, wrap it in a container div with appropriate styling.
.. raw:: html
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 1rem;">
<iframe src="https://www.youtube.com/embed/-nPO9KeNydM?si=nE0Tpy7wM8D6fFYU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
</iframe>
</div>
Renders as:
The wrapper div uses a padding-bottom trick to maintain a 16:9 aspect ratio (56.25% = 9/16 * 100%). The iframe is positioned absolutely within this container, allowing it to scale responsively while maintaining the correct proportions.
Tips¶
Aspect ratio: Adjust
padding-bottomto change the aspect ratio. For 16:9 use 56.25%, for 4:3 use 75%.Start time: Add
?start=60to start the video at a specific time (60 seconds in this example).