Youtube-API

index.html

<div class="container">

	<header>
		<img src="https://cdn.mos.cms.futurecdn.net/8gzcr6RpGStvZFA2qRt4v6.jpg" alt="" class="logo" alt="" class="logo">
		<div class="input-group mb-3">
          <input type="text" name="search" placeholder="Search your query" class="form-control" aria-label="Username">
      </div>
	</header>

<!-- 	<section id="video">

	</section> -->

	<main>

	</main>

</div>

script.js

// https://developers.google.com/youtube/v3/docs/playlistItems/list

// https://console.developers.google.com/apis/api/youtube.googleapis.com/overview?project=webtut-195115&duration=PT1H




$(document).ready(function () {

    var key = 'AIzaSyAWVzMtpz33ALEIg5vDehZJmmzemecwuRE';
    var playlistId = 'PL2fnLUTsNyq7A335zB_RpOzu7hEUcSJbB';
    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';


    var options = {
        part: 'snippet',
        key: key,
        maxResults: 20,
        playlistId: playlistId
    }

    loadVids();

    function loadVids() {
        $.getJSON(URL, options, function (data) {
            var id = data.items[0].snippet.resourceId.videoId;
            mainVid(id);
            resultsLoop(data);
        });
    }

    function mainVid(id) {
        $('#video').html(`
					<iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
				`);
    }

		
    function resultsLoop(data) {

        $.each(data.items, function (i, item) {

            var thumb = item.snippet.thumbnails.medium.url;
            var title = item.snippet.title;
            var desc = item.snippet.description.substring(0, 100);
            var vid = item.snippet.resourceId.videoId;


            $('main').append(`
							<article class="item" data-key="${vid}">

								<img src="${thumb}" alt="" class="thumb">
								<div class="details">
									<h4>${title}</h4>
									<p>${desc}</p>
								</div>

							</article>
						`);
        });
    }

		// CLICK EVENT
    $('main').on('click', 'article', function () {
        var id = $(this).attr('data-key');
        mainVid(id);
    });


});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@mixin font-base {
	padding: 0;
	margin: 0;
	line-height: 1.3;
	font-weight: 600;
}

h4 {
	@include font-base;
}

p {
	@include font-base;
	color: grey;
	font-size: 0.7rem;
}

body {
	background-color: #eee;
}

.container {
	width: 1060px;
	background-color: #fff;
	height: 1000vh;
	margin: auto auto;
}

header,
section {
	position: fixed;
	text-align: center;
	width: 560px;
	background-color: #fff;
}

section {
	top: 50px;
}

.logo {
	width: 120px;
	padding: 10px;
}

main {
	padding: 370px 18px 10px;
}

article {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border: 2px solid white;
	border-radius: 8px;
	margin: 0 auto;
	&:hover {
		border: 2px solid #ff9999;
	}
}

.thumb {
	height: 70px;
	border-radius: 4px;
}

.details {
	padding: 8px 22px;
}

youtube-api.markdown

Youtube-API

A Pen by Ruchi Pakhle on CodePen.

License.

great example
ik ik i shouldn't rant but the google guys are actually bastards sometime
i was building the same for music

i was testing different searches and videos
so far i can tell that the popular music videos ( the ones that actually matter -- the ones that bring actual business to them -- yes where they shove ads in our faces -- return error in response )
searches returned from official channel were not playing but videos from less popular channel played just fine
(- they asked me to visit YT -)
( these videos couldn't be played )
( this is just messed up )

and thanks to @Ruchip16 for plain and well put example

but if someone else is trying to build something fun - forget about it google don't want you to do that
it will take me days to get over google's two faced bs ( youtube api - a joke )
imo this is another example where developers put their head down and do the dirty business of corporate