Do you want to add fullscreen videos on your WordPress site? Sometimes you may need to display videos without the top and bottom black bars, so your users can view the video end-to-end on their screen. In this tutorial, we will share how to remove black bars from a video embed in WordPress.
By default, the video embed in WordPress from any resource like YouTube, Wistia, and more will appear as it is in the original video. You need to use a plugin like Envira Gallery to get full control on how you want to display your videos to the users.
To remove black bars from a video embed in WordPress, you’ll need to follow these 6 steps:
- Step 1. Install and activate Envira Gallery plugin
- Step 2. Install and activate Envira’s Videos Addon
- Step 3. Create a new video gallery in WordPress
- Step 4. Go to video settings and force larger videos
- Step 5. Edit the videos to adjust width and height
- Step 6. Show these videos in your WordPress pages
Ready to get started? Let’s go!
Step 1: Install and Activate Envira Gallery Plugin
The first thing you need to do is to install and activate Envira Gallery plugin on your WordPress site.
To learn about the installation process of this plugin, you should check out this guide on how to install and activate Envira Gallery.
Step 2: Install and Activate Envira’s Videos Addon
Upon activating the plugin, you need to go to Envira Gallery » Addons to install and activate Videos Addon.
To access this addon, you must have Envira Pro or higher license. Simply upgrade your Envira license here.
Videos addon allows you to add videos on your WordPress site and gives you the full control on them.
Step 3: Create a New Video Gallery in WordPress
After you have installed the plugin and addon, simply go to Envira Gallery » Add New from your WordPress admin backend.
You need to add a title and drop your videos in the Native Envira Gallery section.
However, this will only take the self-hosted videos. If you want to add videos from other resources like YouTube, Wistia, and more, then click on the Select Files From Other Sources button.
It will open a popup where you can add your videos.
To learn about the other basic settings, you should check out this guide on how to create a responsive video gallery in WordPress.
Step 4: Go to Video Settings and Force Larger Videos
Once you have added your videos, scroll down to Videos tab and check mark to Force Larger Videos setting.
This will affect your YouTube and Wistia videos to display them on full screen instead of the original size and remove black bars from a video.
Step 5: Edit the Videos to Adjust Width and Height
The above settings will not affect your self-hosted or other videos. Though you can manually edit them.
Simply go to Images tab and click on the edit (pencil) icon. It will open a lightbox popup for you to edit metadata of the video. Scroll on the right side to add your video width and height.
You can change the width and height till you get the required result.
Step 6: Show These Videos in Your WordPress Pages
After all the settings, you need to click on the Publish button. Copy the shortcode from Envira Gallery Code widget.
To display your videos, you need to go to WordPress Pages/Posts » Add New or edit an existing page/post. In the visual editor, simply paste the shortcode.
Hit the Publish/Update button and visit your site to see the videos.
That’s all. We hope this tutorial has helped you to learn how to remove black bars from a video embed in WordPress. You may also want to check out our guide on how to create an image gallery with thumbnails in WordPress. In case, you videos are loading slow on your site, we recommend you to check this ultimate guide to boost speed and performance.
If you like this tutorial, then please follow us on Twitter and Facebook for more free WordPress guides and resources.
