A Pen by RENATUS BERNARDO on CodePen.
Created
October 2, 2020 09:27
-
-
Save Rb-tech-byte/c32d393ce016fdac4c5e8c1b22cf7a8e to your computer and use it in GitHub Desktop.
Youtube API Complete
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <header> | |
| <img src="C:\Users\25576\Desktop\WEN-STORE.COM\Logo.png" alt="Logo"> | |
| </header> | |
| <section id="video"> | |
| <iframe width="560" height="315" | |
| src="https://www.youtube.com/embed/VaQMQUH00GM?start=2" frameborder="0" | |
| allow="accelerometer; | |
| autoplay; clipboard-write; | |
| encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </section> | |
| <main> | |
| <article> | |
| <img src="C:\Users\25576\Desktop\WEN-STORE.COM/lern.jpg" | |
| alt="thumb"> | |
| <div class="thumb"> | |
| <h4>Wen-Store.com</h4> | |
| <p>World Entrepreneurship Network</p> | |
| </div> | |
| </article> | |
| <article> | |
| <img src="C:\Users\25576\Desktop\WEN-STORE.COM/lern.jpg" | |
| alt="thumb"> | |
| <div class="thumb"> | |
| <h4>Wen-Store.com</h4> | |
| <p>World Entrepreneurship Network</p> | |
| </div> | |
| </article> | |
| <article> | |
| <img src="C:\Users\25576\Desktop\WEN-STORE.COM/lern.jpg" | |
| alt="thumb"> | |
| <div class="thumb"> | |
| <h4>Wen-Store.com</h4> | |
| <p>World Entrepreneurship Network</p> | |
| </div> | |
| </article> | |
| </main> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 = 'AIzaSyAYKIBEny-nPVJL_4ABu9k13WOu5y-Z1aE'; | |
| var playlistId = 'UCXmIfzy0ioQuK3IBUC1vISg/playlists'; | |
| 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); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/0.5.0/sql.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment