When you are embedding a video using a responsive (default) embed code, you may encounter an issue where white space appears above and below your video player.
This white space is caused by the padding % at the front of the embed code. There are a few things you can do to remove this white space.
-
Custom dimensions: On the video settings page, select the privacy option from the Share button > Embed > Customize >toggle on Set custom dimensions
You can edit the side of the player using the text boxes below the toggle. -
Edit padding: You can manually edit the padding percentage in the embed code. If you know the height and width of the parent container, put the padding value as parentHeight/parentWidth %.
Example: If the parent container is 5000 pixels x 10000 pixels, the padding would be 50%.
Below is a sample embed code with 50% padding:
<div style="padding:50% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/000?h=000&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; gyroscope; accelerometer" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Tour of Ibiza"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
-
Remove padding: You can entirely remove the padding from the default embed code if you wish by deleting the following from the beginning of the code: "padding:50% 0 0 0;position:relative;"
Below is a sample embed code with no padding:<div style= ><iframe src="https://player.vimeo.com/video/000?h=000&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; gyroscope; accelerometer" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Tour of Ibiza"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
If you continue to encounter issues with your embedded video, please contact our support team.
When contacting our support team for any embedding issues, include the following information in your support ticket:
- URL of the embedded video
- Link to the webpage where the video is embedded (along with any login information, if needed)
- Method of embedding: Are you embedding the video using the HTML embed code or the video URL/direct file link?