Skip to content

Instantly share code, notes, and snippets.

@Rb-tech-byte

Rb-tech-byte/index.html

Created October 2, 2020 09:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Rb-tech-byte/47565fc0d34e238f887290acbcb0c1b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Rb-tech-byte/47565fc0d34e238f887290acbcb0c1b4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Rb-tech-byte created this gist Oct 2, 2020.
    15 changes: 15 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <div class="container">

    <header>
    <img src="https://richardmiddleton.me/projects/youtube/images/logo.png" alt="" class="logo">
    </header>

    <section id="video">

    </section>

    <main>

    </main>

    </div>
    77 changes: 77 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    // YOU WILL NEED TO ADD YOUR OWN API KEY IN QUOTES ON LINE 5, EVEN FOR THE PREVIEW TO WORK.
    //
    // GET YOUR API HERE https://console.developers.google.com/apis/api


    // 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

    // <iframe width="560" height="315" src="https://www.youtube.com/embed/qxWrnhZEuRU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    // https://i.ytimg.com/vi/qxWrnhZEuRU/mqdefault.jpg


    $(document).ready(function () {

    var key = [YOUR API KEY HERE];
    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);
    });


    });
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    68 changes: 68 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    @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: 560px;
    background-color: #fff;
    margin: 0 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;
    }
    7 changes: 7 additions & 0 deletions youtube-api-complete.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Youtube API Complete
    --------------------


    A [Pen](https://codepen.io/Middi/pen/QQrOdB) by [Richard Middleton](https://codepen.io/Middi) on [CodePen](https://codepen.io).

    [License](https://codepen.io/Middi/pen/QQrOdB/license).