Last active
May 30, 2025 08:54
-
-
Save ShaneBrumback/3a19d91d8316a26275862ed779ede87c to your computer and use it in GitHub Desktop.
How To Load YouTube Videos On a Webpage
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
| <!--//////////////////////////////////////////////////////////////////////////////////////// | |
| /// /// | |
| /// Example Using YouTube API, HTML, CSS & JavaScript /// | |
| // 3D Interactive Web Apps & Games 2021-2024 /// | |
| /// Contact Shane Brumback https://www.shanebrumback.com /// | |
| /// Send a message if you have questions about this code /// | |
| /// I am a freelance developer. I develop any and all web. /// | |
| /// Apps Websites 3D 2D CMS Systems etc. Contact me anytime :) /// | |
| /// /// | |
| ////////////////////////////////////////////////////////////////////////////////////////////--> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>How to Load Video With YouTube API Example</title> | |
| <style> | |
| body { | |
| color: white; | |
| text-align: center; | |
| margin: 0; | |
| background-color: black | |
| } | |
| a { | |
| text-decoration: none; | |
| color: white; | |
| } | |
| h1 { | |
| padding: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="http://www.shanebrumback.com/blog/how-to-load-youtube-videos-on-a-web-page-with-youtube-api.html"> | |
| <h1>How to Load Videos With The YouTube API</h1> | |
| </a> | |
| <div id="video-container"></div> | |
| <script> | |
| // Your API key | |
| var API_KEY = 'YOUR_API_KEY'; // replace with your API key | |
| var CHANNEL_ID = 'YOUR_CHANNEL_ID'; // replace with your channel ID | |
| // The div element where the videos will be embedded | |
| const videoContainer = document.getElementById('video-container'); | |
| // Fetch the videos from the channel | |
| fetch(`https://www.googleapis.com/youtube/v3/search?key=${API_KEY}&channelId=${CHANNEL_ID}&part=snippet&maxResults=50`) | |
| .then(response => response.json()) | |
| .then(data => { | |
| data.items.forEach(video => { | |
| // Create a new iframe element | |
| const iframe = document.createElement('iframe'); | |
| iframe.style.padding = '15px'; | |
| var videoDate = video.snippet.publishedAt; | |
| console.log(videoDate); | |
| // Set the src to the video URL | |
| if (videoDate.includes('2023')) { | |
| iframe.src = `https://www.youtube.com/embed/${video.id.videoId}`; | |
| // Add the iframe to the div | |
| videoContainer.appendChild(iframe); | |
| } | |
| }); | |
| }) | |
| .catch(error => { | |
| console.error(error); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment