How to Add YouTube Videos to WordPress Right Now (Easiest Way)
Home Blog How to Embed YouTube Video in Website with Time Length and Duration

How to Embed YouTube Video in Website with Time Length and Duration

embed youtube video time length duration

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.

manual embed code youtube

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.

youtube feed pro plugin smash balloon

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.

guided flow for youtube feed pro

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.

video duration youtube feed pro

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.

embed youtube playlist by adding new feed

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.

youtube feed types youtube

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.

add api key youtube

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.

copy playlist link youtube feed pro

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.

insert playlist id youtube

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.

pick a feed template youtube feed pro

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.

live feed customizer youtube feed pro

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.

video options youtube feed pro

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:

layout options youtube feed pro

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.

grid layout for youtube feed pro

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.

gallery layout for youtube feed pro

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.

list layout for youtube

Want a great way to make your website more interactive?

Select the Carousel layout and turn your video feed into a YouTube slideshow carousel.

youtube feed pro carousel layout

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.

embed to a page youtube feed

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.

select your page wordpress

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.

add a block wordpress page

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.

add feeds for youtube block

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.

open your youtube feed gallery

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.

add to a widget option

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.

open sidebar panel

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.

open footer panel

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.

add youtube widget to your site

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:

sidebar youtube videow with length

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.

author avatar
Sajjan Sharma Senior Writer
Sajjan has been writing about WordPress, social media marketing, and online businesses for over 10 years. His professional interests extend to include influencer marketing, content curation and digital marketing strategies.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.