Embed youtube channel videos on the website free.

Embed youtube channel videos on the website free.

Jan. 1, 2018
5 minutes read time
0 likes
0 comments
1649 times viewed


header image

Description

Embedding youtube videos creates a lots of engagement to visitors on website, youtube provides a way to embed a single video or playlist videos but to embed all the videos from a channel is challenging. This article provides easy way to embed youtube channel videos, user uploaded videos and playlist videos.

Content

Embed youtube channel videos on the website free.

Get API Key from Google

google_developer_console_kodefork.png

Get your Youtube Channel ID

Get jquery and jquery.tubber.min.js

Download jquery.tubber.min.js

Now add both jquery and jquery.tubber.min.js to webpage.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.tubber.min.js"></script>

Embed code for youtube videos

HTML Code

div id="youtube-video-container"></div>
<div class="pagination">
    <button id="youtube-video-prev-page" class="ui mini left labeled icon button"><i class="left arrow icon"></i>Previous</button>
    <button id="youtube-video-next-page" class="ui mini right labeled icon button"><i class="right arrow icon"></i>Next</button>
</div>

JS Code:

Here replace, your API Key and Youtube Channel ID.

<script>
    $.fn.tubber.defaults.apiKey = 'YOUR-API-KEY';

    $('#youtube-video-container').tubber({
        channelId: 'Your-Youtube-Channel-ID',
        itemsPerPage: 8,
        prevPageControl: $('#youtube-video-prev-page'),
        nextPageControl: $('#youtube-video-next-page')
    });
</script>

Show Playlist or User Uploaded Videos

In case you want to show the youtube videos from playlist instead of channel, then in above code in place of channelId give playlistId.

playlistId: 'Your-Youtube-Playlist-ID',

and if you want to show the videos uploaded by a user, just give username in place of channelId.

username: 'Your-Youtube-Username',

That’s good to go.




We are done



Like this post

0   Like


Share this post on

Google Plus LinkedIn


About the author




Join the discussion

Nothing to preview

Post Comment



Comments