When adding a video to an Experience, you may see black bars on the top, bottom, left or right edges of the video, like in the following example:
This will happen if the video is not sized at a perfect 16:9 ratio or 4:3 ratio (based on the size of the video) but luckily there is a quick fix to this issue.
METHOD ONE - you do not know your video's aspect ratio
First, start by placing and sizing the video in your Experience to your liking, and don’t worry if you see the black bars on the video while you are doing this. Once the video is positioned, hit the Preview button in the top left corner of the Creator Studio window.
In Preview mode, hit the play button on your video, then right click twice on the center of the video itself and hit the Inspect option that you are presented with:
NOTE: the exact process you need to take here will vary from browser to browser, but should be the same general process. When right clicking twice on the video in Chrome, you will hit the "Inspect" option, but in Firefox and Microsoft Edge you will right click twice then choose the "Inspect Element" option. For Microsoft Edge users, you will want to simply hit the F12 button on your keyboard once the video starts playing.
After clicking on Inspect, your screen should look like this:
If you put your mouse on top of the area highlighted in blue (which is highlighted by a red box in the screenshot above) then you should see appropriate width and height that you will want to set your video at in order to remove the black bars.
Finally, you will want to hit "Return to Editor" in the top left corner of the Preview window, click on your video in Creator Studio and then open the Position properties on the right hand side of the window.
After correcting the width/height, if you preview your Experience again you should see the black bars have been removed from the video. Since we had to adjust the width/height of the video slightly, you may need to also adjust the placement of the video slightly – but if you do that, just remember to not change the width/height of the video any further (at least not without repeating the steps above to remove any black bars that might get added back in).
METHOD TWO - you know your video has a 16:9 or 4:3 aspect ratio
Start by placing and sizing the video in your Experience to your liking – don’t worry if you see the black bars on the video while you are doing this. Once the video is positioned, check the width of the video inside the Position properties in the right-hand side of Creator Studio:
Now take that width, and plug it into any 16:9 or 4:3 aspect ratio calculator that you’d like to use – there are several that you can find online, such as these:
- 16:9 aspect ratio calculator - https://www.size43.com/16by9-aspect-ratio-calculator/
- 4:3 aspect ratio calculator - https://www.size43.com/4by3-aspect-ratio-calculator/
And that should give you the height that you need to set your video at for it to have the perfect 16:9/4:3 aspect ratio. In this example, the width of our video is 640 pixels, so the height that we need to set it at is 360 pixels:
After correcting the height, if you preview your Experience you should see the black bars have been removed from the video. Since we had to adjust the height of the video slightly, you may need to also adjust the placement of the video slightly – but if you do that, just remember to not change the width/height of the video any further (at least not without repeating the steps above to remove any black bars that might get added back in).
Please let us know if you have any further questions on this process, and do not hesitate to reach out to firstname.lastname@example.org for anything that you may need our help with!