Bal.lat TUBE

Published on 13 December, 2023 | 234 views | 1 minutes read

Best free viideos on the internet

<script>// Replace "YOUR_API_KEY" with your actual YouTube API key

const apiKey = "YOUR_API_KEY";

const channelId = "UCcNrmSXswsMJzuaSQknziTw";

// Function to fetch videos from YouTube API

async function getVideos() {

const url = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&key=${apiKey}`;

const response = await fetch(url);

const data = await response.json();

return data.items;

}

// Function to display video thumbnails and titles

function renderVideos(videos) {

const container = document.getElementById("video-container");

container.innerHTML = "";

for (const video of videos) {

const thumbnailUrl = video.snippet.thumbnails.medium.url;

const videoId = video.id.videoId;

const title = video.snippet.title;

container.innerHTML += `

<a href="#" data-video-id="${videoId}">

<img src="${thumbnailUrl}" alt="${title}" />

<p>${title}</p>

</a>

`;

}

}

// Function to display video description

function showVideoDescription(videoId) {

const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${videoId}&key=${apiKey}`;

fetch(url)

.then(response => response.json())

.then(data => {

const description = data.items[0].snippet.description;

document.getElementById("video-description").innerHTML = description;

});

}

// Function to handle video click and play ad

function playVideo(videoId) {

// Show your ad in the "ad-container" element here

document.getElementById("ad-container").style.display = "block";

// Use setTimeout to simulate ad duration and then play the actual YouTube video

setTimeout(() => {

const player = new YT.Player('player', {

videoId,

events: {

'onReady': onPlayerReady,

}

});

document.getElementById("ad-container").style.display = "none";

}, 5000); // Replace 5000 with your desired ad duration in milliseconds

}

// Function called when YouTube player is ready

function onPlayerReady(event) {

event.target.playVideo();

}

// Initial setup

getVideos()

.then(videos => renderVideos(videos))

.catch(error => console.error(error));

// Add click event listener to video thumbnails

document.getElementById("video-container").addEventListener("click", event => {

if (event.target.tagName === "IMG") {

const videoId = event.target.dataset.videoId;

showVideoDescription(videoId);

playVideo(videoId);

}

});

// Remember to load the YouTube IFrame Player API before calling any player functions

const tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

const firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

<script>

<div id="video-container"></div>

<div id="video-description"></div>

<div id="ad-container"></div>