Here w3 tweaks done YouTube Video API call tutorial and demo for users. From this tutorial W3 Tweaks covered below functionalities.

  1. Embed YouTube video from YouTube API call
  2. Display Video description, Hits, YouTube Video title and publish date.
  3. Displayed JSON request from YouTube API call for user review
  4. YouTube like theme
  5. Responsive design
  6. YouTube time format change

YouTube Video Embed View from API call Demo

CSS Code

<link rel="stylesheet" href=" http://demo.w3tweaks.com/youtube_video/maincss.css" type="text/css">

HTML Code

<div id="hyv-player-page" class="hyv-player-watch">
    <div class="hyv-content-left hyv-player">
        <div id="hyv-player-api" class="hyv-player-width hyv-player-height hyv-off-screen-target hyv-player-api"> </div>
        <div id="hyv-watch-content" class="hyv-watch-main-col">
            <!-- Video header start -->
            <div id="hyv-watch-header" class="hyv-card hyv-card-has-padding">
                <!-- Video title start -->
                <div id="hyv-watch-headline" class="clearfix">
                    <div id="hyv-watch-headline-title">
                        <h1 class="hyv hyv-watch-title-container"> <span id="hyv-eow-title" class="hyv-watch-title" dir="ltr" title=""></span> </h1> </div>
                </div>
                <!-- Video title end -->
                <!-- Video user header -->
                <div id="hyv-watch-user-header">
                    <a class="hyv-user-photo"> <span class="hyv-video-thumb hyv-thumb hyv-thumb-48"> <span class="hyv-thumb-square"> <span class="hyv-thumb-clip"></span> </span>
                        </span>
                    </a>
                    <div class="hyv-user-info"></div>
                    <div class="hyv-social-send"></div>
                </div>
                <!-- Video user header end -->
                <!-- Social buttons start-->
                <div id="hyv-watch-social-buttons" class="hyv-watch-social-buttons clearfix">
                    <div id="hyv-watch-social-actions" class="hyv-watch-social-actions hyv-button-group"></div>
                    <div id="hyv-watch-social-actions-like" class="hyv-watch-social-actions-like">
                        <div id="hyv-watch-views-info">
                            <div class="hyv-watch-view-count"></div>
                        </div>
                    </div>
                </div>
                <!-- Social buttons end-->
            </div>
            <!-- Video header end -->
            <!-- Video details start -->
            <div id="hyv-watch-details" class="hyv-card hyv-card-has-padding">
                <div id="hyv-watch-description">
                    <div id="hyv-watch-description-content">
                        <div id="hyv-watch-description-clip">
                            <div id="hyv-watch-uploader-info"> <strong class="hyv-watch-time-text"></strong> </div>
                            <div id="hyv-watch-description-text" class="">
                                <p id="hyv-eow-description"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Video details end -->
        </div>
    </div>
    <div id="hyv-watch-sidebar" class="hyv-watch-sidebar">
        <div id="hyv-watch-sidebar-contents" class="hyv-card hyv-card-has-padding">
            <!-- Ads width 300px holder start -->
            <div id="hyv-watch-sidebar-ads">
                <div id="hyv-watch-channel-brand-div" class="">
                    <div id="hyv-watch-channel-brand-div-text">Advertisement</div>
                    <div id="hyv-companion-ad-div"> </div>
                </div>
            </div>
            <!-- Ads width 300px holder end -->
            <!-- Sidebar content start -->
            <div id="hyv-watch-sidebar-modules">
                <div class="hyv-watch-sidebar-section">
                    <div style="font-weight:bold;">JSON Responce</div>
                    <div class="hyv-watch-sidebar-body" style="height:500px;overflow:scroll;"> </div>
                </div>
            </div>
            <!-- Sidebar content end -->
        </div>
    </div>
</div>

Note: If you have any clarification on above HTML Code please do comment will replay back

Include jQuery plugin

<script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>

JavaScript Code

$(document).ready(function() {
    //jquery
    var video = $(location).attr('href').split('v=')[1];
	function numberformat(number, n, x) {
		var re = '(\\d)(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
		return number.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$1,');
	};
    $.ajax({
            cache: false,
            data: $.extend({
                key: 'API_KEY',
                id: video
            }, {}),
            dataType: 'json',
            type: 'GET',
            timeout: 5000,
            url: 'https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics,status&fields=items(id,snippet,statistics,contentDetails,status)'
    })
    .done(function(data) {
        var items = data.items[0];
        console.log(items);
        // Add player
        $("#hyv-player-api").html('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/'+items.id+'?rel=1&showinfo=1" frameborder="0" allowfullscreen=""></iframe>');
        // Add title
        $("#hyv-eow-title").text(items.snippet.title);
        // Add thumb img
        $(".hyv-thumb-clip").html('<img width="48" height="48" src="'+items.snippet.thumbnails.default.url+'" />');
        // Add View Count
        $("#hyv-watch-views-info .hyv-watch-view-count").text(numberformat(parseInt(items.statistics.viewCount)));
        // Add title
        $(".hyv-user-info").text(items.snippet.channelTitle);
        // Add publish data
        $(".hyv-watch-time-text").text("Published on "+items.snippet.publishedAt);
        // Add publish data
        $("#hyv-eow-description").text(items.snippet.description);
        new PrettyJSON.view.Node({ 
            el:$(".hyv-watch-sidebar-body"), 
            data:items
        });
    });
});

Note: Replace 'API_KEY' with your youtube api key

YouTube API Call URL

https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics,status&fields=items(id,snippet,statistics,contentDetails,status)

Please feel free to comment the article and like & share if you like the article

Download Demo

Advertisement

Google Matched Content...