Youtube

api load frame

    <div class="wrap_section_video_popup">
        <div class="section_video_popup_item">
            <div class="section_video_popup_video">
                <div class="video-responsive">
                    <script src="//www.youtube.com/player_api"></script>
                    <script>
                        var player;
                        function onYouTubePlayerAPIReady() {
                            player = new YT.Player('video_section_popup', {
                                playerVars: {
                                    'autoplay': 1,
                                    'controls': 1,
                                    'autohide': 0,
                                    'showinfo': 0,
                                    'mute': 1,
                                    'loop': 1
                                },
                                videoId: 'zTDebRyvSk4',
                                events: {
                                    'onReady': function () {
                                        player.pauseVideo();
                                        player.playVideo();
                                        initialize();
                                        $('p.section_video_popup_name').text(player.getVideoData().title);
                                    },
                                    'onStateChange': function (event) {
                                        switch (event.data) {
                                            case -1:
//                                                console.log ('unstarted');
                                                break;
                                            case 0:
//                                                console.log ('ended');
                                                $('.section_video_popup_video').removeClass('active');
                                                break;
                                            case 1:
//                                                console.log ('playing');

                                                setTimeout(function () {
                                                    $('.section_video_popup_video').addClass('active');
                                                }, 200);
                                                break;
                                            case 2:
//                                                console.log ('paused');
                                                $('.section_video_popup_video').removeClass('active');
                                                break;
                                        }
                                    }
                                }
                            });
                        }
                        function initialize() {
                            updateProgressBar();

                            var time_update_interval;
                            clearInterval(time_update_interval);
                            time_update_interval = setInterval(function () {
                                updateProgressBar();
                            }, 1000)

                        }

                        function updateProgressBar() {
                            // Update the value of our progress bar accordingly.
                            $('.section_video_popup_progress span').css('width', (player.getCurrentTime() / player.getDuration()) * 100 + '%');
                        }

                        $('body').on('click', 'a.section_video_popup_btn_play', function () {
                            player.playVideo();
                            return false;
                        });
                        $('body').on('click', 'a.section_video_popup_btn_pause', function () {
                            player.pauseVideo();
                            return false;
                        });

                    </script>
                    <div id="video_section_popup"></div>
                </div>
                <span class="section_video_popup_bg"
                      style="background-image: url(//img.youtube.com/vi/zTDebRyvSk4/mqdefault.jpg)"></span>
            </div>
            <div class="section_video_popup_options">
                <a href="#" class="section_video_popup_close"></a>
                <p class="section_video_popup_name">text name item</p>
                <div class="section_video_popup_btn">
                    <a href="#" class="section_video_popup_btn_play"></a>
                    <a href="#" class="section_video_popup_btn_pause"></a>
                </div>
                <div class="section_video_popup_progress">
                    <span></span>
                </div>
            </div>
        </div>
    </div>

Get videos by channel

//add video youtube channel
    if ($('.video_slider_youtube').length) {

        $.ajax({
            type: 'GET',
            url: 'https://www.googleapis.com/youtube/v3/search',
            data: {
                order: 'date',
                part: 'snippet',
                channelId: 'UCBvF9cRoyNHM7AH6gJx2ZYQ',
                maxResults: 10,
                key: 'AIzaSyC5puaYRlmlCFaJvR9SKgzY9vjLoD-UM0Q',
            },
            success: function (data) {
                //get id video
                var pid = 0;
                var output = '';
                $.each(data.items, function (i, item) {
                    pid = item.id.videoId;
                    if (pid) {
                        output += "<div><iframe width='853' height='480' src='https://www.youtube.com/embed/" + pid + "?rel=0&amp;showinfo=0' frameborder='0' allowfullscreen></iframe></div>";
                    }
                });

                //add content
                $('.video_slider_youtube').append(output);

                //slider
                setTimeout(function () {
                    $('.video_slider').slick({
                        dots: true,
                        infinite: true,
                        speed: 500,
                        fade: true,
                        autoplay: true,
                        arrows: true,
                        cssEase: 'linear',
                        autoplaySpeed: 5000
                    });
                }, 100);
            }
        });
    }
    
    <!--HTML-->
    <div class="video_slider video_slider_youtube"></div>