The transparency discussed here is referring specifically to the iframe (the containing web element), not transparency in any videos you upload. Vimeo does not include alpha channel support at this time.
In this article:
Transparent Background
By default, the background of the player iframe is transparent on Vimeo. All player elements (playbar, buttons, etc) are pinned to the video image, not the actual size of the iframe.
To avoid blank space in an embed, we recommend choosing a player size that matches your video's native aspect ratio. For example, if the original video has an aspect ratio of 16:9, you’ll want to embed the video with dimensions that yield an aspect ratio of 16:9, such as 800 x 450.
⚠️Note: The dimensions of the embedded player can also be influenced by the CSS styling established by your webpage. For videos embedded in a responsive design, make sure the height and width are both adjusted to maintain your video's native aspect ratio.
Turn off the transparent background
If your player displays differently than what you originally intended, you can disable the transparent background.
- To turn off the transparent background, add ?transparent=0 to the end of the player URL in your embed code. This parameter will force a black iframe background and pin the player elements to the iframe, instead of the video image.
Example embed code:
<iframe src="https://player.vimeo.com/video/137805268?transparent=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
⚠️Note: If your video is set to the Unlisted privacy setting, the any other parameter must be added after the privacy hash (?h=913052c8ff) at the end of the URL using & instead of ?. Here's an example of an unlisted video's iframe code with using the transparent parameter:
<iframe src="https://
player.vimeo.com/
video/498315244?h=913052c8ff&transparent=0 autoplay=1
" width="640" height="480" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
Apply a custom iframe background color
Instead of transparency or black bars, you can choose the exact color that fills your iframe. Keep in mind that you'll need to visit your video's player settings to adjust the color of the text and play bar within the player.
- To apply a specific background color, you’ll need to add the following inline style property to your iframe embed code:
style="background-color: #FFFFFF"
FFFFFF is the color hex value for white, but you can search the Hex code database for your desired color here.
Example embed code:
<iframe src="https://player.vimeo.com/video/236787722" style="background-color: #FFFFFF" width="1000" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
⚠️Note: There is no way to change the color of the frame that appears while your video loads. This should not be noticeable to most viewers but could affect viewers with slower internet connections.