Want to know how to embed YouTube videos in your website with the time length and duration?
Showing YouTube videos is a great way to keep visitors engaged and convert them into new customers.
But manually displaying YouTube videos can be tough — especially if you want to show the video length clearly.
The solution? We’ll show you an easy way to embed YouTube videos on your WordPress website, along with the length and duration.
Let’s get started!
Easiest Way to Embed YouTube Videos on Your Website
When it comes to embedding YouTube content, you have 2 options that you can pick from:
- Manual method: Generate the embed code for your YouTube video, tweak the code, and then add it to your WordPress site.
- Automatic method: Use a YouTube WordPress plugin to automatically add YouTube videos to your website in just a few clicks.
If you go with the manual method, embedding videos can end up taking a lot of time and effort since you’re manually inserting code into your site.
What’s more, you won’t be able to show the video length on the embedded video. So, your visitors won’t be able to check how long the video is without clicking on the play button.
On the other hand, you can go with the automatic method and get a YouTube feed plugin to embed videos for you.
And the best option that you can use is YouTube Feed Pro.
As the best YouTube feed plugin in the market, you can use YouTube Feed Pro to embed videos from YouTube playlists, channels, favorite lists, and much more.
What’s more, you get a simple guided flow that will take you through the process of creating, customizing, and embedding YouTube feeds — no coding needed.
In fact, the plugin comes with a simple visual customizer that can help you personalize your YouTube feeds.
From there, you can change your layout, button design, header, color scheme, and much more.
In fact, you can use the live feed editor to easily customize the look and feel of your YouTube feed — no need to touch a single line of code.
What’s more, YouTube Feed Pro even lets you show or hide the video duration.
The best part? YouTube Feed Pro comes with a team of experts who are always ready to lend you a hand and answer your questions.
Ready to display YouTube videos on your website? Get your copy of YouTube Feed Pro here!
With that, let’s get started with our tutorial below.
How to Add YouTube Videos With Duration on Your Website
Just follow these simple steps below and you can have a beautiful feed of YouTube videos complete with the duration tag.
Step 1: Install Feeds for YouTube Pro
To get started, you can get the YouTube Feed Pro plugin from here and download it to your computer.
Once you have the plugin saved, install and activate it on your WordPress website.
For information on how to do this, you can go ahead and check out our tutorial on how to install plugins on your WordPress site.
You can then start creating a feed of YouTube videos in step 2.
Step 2: Create a YouTube Feed
After the plugin is ready, you can create a YouTube feed of the videos that you’d like to embed.
From your admin dashboard, first, open the YouTube Feed » All Feeds menu to see a list of all your YouTube feeds.
First time using the plugin? You can just create a new feed by clicking on Add New.
YouTube Feed Pro will then let you choose the source for your YouTube videos.
You can choose from 6 different options, including a YouTube channel, playlist, favorites list, single videos, and more.
Select the option that you prefer and then click on the Next button.
For our example, we’ll embed content from a Playlist of YouTube videos.
In the next step, you can go ahead and connect your newly created feed to YouTube.
Step 3: Connect Your Feed to YouTube
To show YouTube videos on your site, you can connect this feed to your YouTube account.
If you want a simple way to do this, you can simply use your YouTube API key.
Don’t have an API key yet? We’ve got a useful tutorial on creating a YouTube API Key that you can check out.
After getting your key, return to your website and paste it on the popup before clicking on Add.
With that, you can select which YouTube channel, playlist, favorites, list, or more that you want to connect to.
For this example, we’ll connect our YouTube playlist.
All you have to do is open the YouTube playlist on your web browser and then copy the code at the end.
Now that you have your Playlist ID code, you can go back to your website once more.
There, paste the code into the Playlist ID field and then click on Next.
So far, you’ve created a new YouTube video feed and connected it to a source.
In step 4, you can use the customization options to change how the YouTube videos will look on your website.
Step 4: Customize Your YouTube Videos Feed
The great thing about YouTube Feed Pro is that it’ll automatically copy the design of your WordPress site.
What’s more, you have total control over the design of your YouTube feed.
To get started, you can import a pre-designed template for your feed. You have 8 different templates to choose from:
- Default
- Carousel
- Cards
- List
- Gallery
- Latest video
- Showcase carousel
- Widget
Choose a feed template from the options and then click on Next to continue.
YouTube Feed Pro will now automatically import this design for your new feed.
Next, the plugin will send you to the visual customizer, where you can choose your layout, color scheme, button design, and much more.
Plus, you have a live preview of your feed on the right. Whenever you make any changes, you can see a preview of your feed in real time.
To show your video duration and length, click on the Videos option on the left to get started.
Once you do that, you can choose whether to edit your video style, hover state, or the video elements that show up on your feed.
For now, click on the Edit Individual Elements option to continue.
You can choose to show or hide the play icon, video title, username, and much more from here. Just check and uncheck the options on the left to show or hide that element.
To embed YouTube videos with the time length and duration, check the Video Duration option.
Just like that, your videos will now show a duration tag on the corner of the thumbnail.
To save your changes, click on the Save button at the top.
After you’ve done that, you can click on the small Customize button in the top right corner to continue.
Next, you can set up the layout of the YouTube videos on your WordPress site.
On the left, look for the Feed Layout option and then click on it.
You can now choose from 4 different layouts for your YouTube videos: grid, gallery, list, or carousel.
Let’s look at these layouts below:
If you go for the Grid layout, you can display videos in simple rows and columns.
So, you can engage your visitors by showing tons of different videos at once.
Next, you have the YouTube Gallery layout that can help you put the focus on 1 engaging video.
So, your feed will show a large YouTube video with small thumbnails under it.
For a layout that YouTube users will find familiar, you can go for the List option.
You can then show your video content in a single column so each video gets tons of space on your site.
Want a great way to make your website more interactive?
Select the Carousel layout and turn your video feed into a YouTube slideshow carousel.
Once you’re happy with your feed layout, click on Save to confirm your changes.
From the remaining customization options, you can now change your header style, buttons, number of videos, and much more — no coding needed!
Remember to click on Save once you’re happy with the design of your YouTube feed.
In the next step, you can finally go ahead and embed these YouTube videos with time length and duration.
Step 5: Embed Your YouTube Videos on Your Website
Now that you’re done with the customization, you can choose between 2 ways of embedding YouTube videos:
- Embed YouTube videos on your web page
- Embed YouTube videos on your site’s sidebar or footer
Not sure which to pick? Let’s look at both of these options below:
Embed YouTube Videos on Your Web Page
Since the plugin is so easy to use, you can start embedding videos directly from your visual customizer.
Just click on the Embed button at the top to get started.
YouTube Feed Pro will now show you a popup with all the embed options for this feed. You can even copy your YouTube shortcode here.
To continue, click on the Add to a Page button on the popup.
Doing that will show a list of all the available WordPress pages on your site.
Select a page where you want to embed YouTube videos and then click on Add.
Just like that, the plugin will redirect you to the official WordPress editor so you can embed the videos.
First, click on the plus (+) icon to add a new content block.
Using the search bar at the top, look for the “youtube feed” block.
Finally, you can click on the Feeds for YouTube block from the search results to embed your YouTube feed.
Once you click on Update, anyone visiting your page will be able to see a feed of YouTube videos along with the video length.
If you open the page, you can even check for yourself.
With that, let’s look at the next way of embedding YouTube videos using this plugin.
Embed YouTube Videos on Your Site’s Sidebar or Footer
You can also embed videos on your website’s widget-ready areas like the sidebar or footer.
To embed your YouTube widget, you can just use the visual customizer like before.
In case your video customizer isn’t open, open your site’s dashboard and navigate to the YouTube Feed » All Feeds menu.
Here, click on the YouTube video feed that you created earlier.
Doing that will show you the visual customizer once more.
Just like before, you can click on the Embed button to continue.
Now, YouTube Feed Pro will open a popup with all the ways to embed your YouTube videos.
All you have to do here is click on the Add to a Widget button.
Clicking on that redirects you to the Widgets page of your WordPress website.
If you want to display videos on your sidebar, click on the Sidebar section here.
We’ll also use the sidebar for the sake of this tutorial.
Alternatively, you can click on the Footer panel to embed videos under your main content.
To add a new widget to your sidebar or footer, click on the plus (+) icon at the bottom.
After that, simply click on Feeds for YouTube to embed your YouTube video feed.
Once you save your new widget by clicking on Update, your YouTube feed widget will be displayed on your site.
If you open your website, you can see your YouTube videos embedded like in this example below:
And there you have it!
Now you know how to embed YouTube videos with time length and duration on your WordPress website — in just minutes!
All you need is the YouTube Feed Pro plugin, and you can have a feed of beautiful YouTube content on your website. Just like that, you can boost your engagement, get more conversions, and grow your business.
Want to start creating YouTube feeds easily? Get started with YouTube Feed Pro here.
While you’re here, you can also check out our guide on how to make money on YouTube without showing your face.
Finally, if you found this guide helpful, go ahead and follow us on Twitter and Facebook for more useful YouTube tutorials.
