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.