You can access the embed code for your video in a few different ways:
- The video settings page: You can find your video's embed code in the video's edit page by clicking the Embed button in the top right-hand corner of the page. A modal window will open where you can select between the fixed and responsive codes, as well as manually customize your embed code. The embed code will be copied to your clipboard.
- The video share Lightbox: If you click on the share icon (the paper plane) within the onsite player or public video page, you'll find the embed code in the Lightbox that appears. If you want to customize your embed code, choose +Show Options. In the new menu that appears, you'll be able to make automatic adjustments to your embed code, such as autoplay/loop, colors, embed sizing, etc (note: some of these adjustments can also be done in your video's embed settings or within a text editor). Copy the finalized code shown in the Embed box once finished.
- Library: Click the share icon next to any video, in grid or list view, and choose Copy embed code. (This code will include fixed dimensions).
Adjusting the size of the embedded player
Our default embed code is a fixed size and automatically includes dimensions that maintain the original aspect of your video.
If you want the player to be larger/smaller, you can adjust the height and width values before pasting the code into your webpage builder. We recommend using dimensions that yield the same aspect ratio as your original file; for example, if your video is 1920 x 1080, you’ll want to use dimensions that yield an aspect ratio of 16:9 like 640 x 360.
Responsive embeds
Responsive videos will automatically adjust to accommodate a specific screen or window size. When you're using our responsive embed code, the player will adjust to the dimensions of the container where it's placed, all while preserving your video's original aspect ratio. This means that you’ll need to adjust the parent container in your webpage if you wish to change the size of the player iframe. You cannot adjust the dimensions inside the Vimeo embed code itself.
The responsive embed code can be found in the share menu of your video’s page (e.g vimeo.com/XXXXX), if your video is not Private, and in the embed modal on your simplified settings page. Once you're on the video page, click on the Share icon (the paper plane) within the video player. In the share window that appears, click on +Show options in the top right corner of the lightbox, then select "Responsive.” The code in the embed section should then automatically adjust to include a new div wrapper and script tag. These elements allow the iframe to become responsive.
Note: This Lightbox currently only appears for public or password-protected videos on vimeo.com.
⚠️The responsive code may not play nicely with certain webpage themes and layouts. If you are having trouble with the responsive embed code, we recommend switching back to the fixed-size embed code.
Please note that videos with cards will automatically generate a responsive embed code by default. Learn more here.
Styling the Vimeo iframe
The size and position of the player iframe can be influenced by the styling of your webpage. This is common when using pre-built themes or plugins in webpage builders such as WordPress, Wix, or Squarespace. If you are setting the dimensions in your embed code correctly, but the Vimeo player is displaying differently, we suggest checking your webpage builder to see if any additional formatting is being applied to the player iframe.
If you’re not sure, contact us and we’ll take a look. Be sure to include the URL of your webpage as well as any login information required to access it.