Step-By-Step Vimeo Video Embed Instructions
- Add an HTML block in the location you wish to display your video
- Copy and paste the pre-formatted code option you selected from Step 1
- In Vimeo, open the video page for the video you want to embed
- Copy the string of numbers after the vimeo.com/. For example: https://vimeo.com/446628224
- In the pre-formatted code replace VIDEO_ID with the id you just copied.
- Add a title for your video in place of “Descriptive Video Title“
- Save the page and preview the video. Test to make sure it plays with sub titles, does not auto play and responds to adjustments in page size.
Vimeo Pre-Defined CSS (Options #1 & 3) Embed Code
This is the cleanest option but CSS needs to be added for it to work. Learn how or ask us to add it for you.
<div class="responsive-video">
<iframe
src="https://player.vimeo.com/video/VIDEO_ID?title=0&byline=0&portrait=0&texttrack=en-x-autogen"
title="Descriptive title of the video for screen readers"
frameborder="0"
allow="fullscreen; picture-in-picture"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
loading="lazy">
</iframe>
</div>
Vimeo Inline CSS (Option #2) Embed Code
<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://player.vimeo.com/video/VIDEO_ID?title=0&byline=0&portrait=0&texttrack=en-x-autogen"
title="Descriptive title of the video for screen readers"
frameborder="0"
allow="fullscreen; picture-in-picture"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
loading="lazy">
</iframe>
</div>
