Скрипт для сайта Ютуб Видео "Популярные видео на YouTube"
Для работы нужен ключ гугл api
const API_KEY = 'ВАШ КЛЮЧ API'; 'заменить на свой'
Код: Выделить всё
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Популярные видео на YouTube</title>
<style>
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
position: relative;
background-color: #fff;
margin: 5% auto;
padding: 1px;
border: 1px solid #888;
width: 98%;
max-width: 800px;
text-align: center;
}
.close {
position: absolute;
right: 10px;
top: 10px;
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
iframe {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h1></h1>
<div class="filters">
<select id="country-select">
<option value="RU">Россия</option>
<option value="US">США</option>
<option value="GB">Великобритания</option>
<option value="KZ">Казахстан</option>
<option value="BY">Беларусь</option>
</select>
<select id="category-select">
<option value="">Все категории</option>
</select>
<select id="sort-select">
<option value="default">По умолчанию</option>
<option value="viewCount">По просмотрам</option>
<option value="date_desc">По дате (сначала новые)</option>
<option value="date_asc">По дате (сначала старые)</option>
<option value="rating">По рейтингу</option>
<option value="comments">По комментариям</option>
<option value="duration">По длительности</option>
</select>
</div>
<div class="search-container">
<input type="text" id="search-input" placeholder="Введите запрос для поиска">
<button onclick="searchVideos()">Поиск</button>
</div>
<div id="videos-container"></div>
<button id="load-more" style="display: none;">Показать ещё</button>
<div class="loader" id="loader">Загрузка...</div>
<!-- Модальное окно для просмотра видео -->
<div id="video-modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="video-iframe" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<script>
const API_KEY = 'ВАШ КЛЮЧ API';
const MAX_RESULTS = 50;
let REGION_CODE = 'RU';
let allVideos = [];
let displayedVideos = [];
let currentMode = 'popular';
let currentNextPageToken = '';
let currentSearchPageToken = '';
async function fetchVideoCategories() {
const url = `https://www.googleapis.com/youtube/v3/videoCategories?part=snippet®ionCode=${REGION_CODE}&key=${API_KEY}`;
try {
const response = await fetch(url);
const data = await response.json();
const select = document.getElementById('category-select');
select.innerHTML = '<option value="">Все категории</option>';
data.items.forEach(category => {
const option = new Option(category.snippet.title, category.id);
select.add(option);
});
} catch (error) {
console.error('Ошибка загрузки категорий:', error);
}
}
async function fetchPopularVideos(categoryId = '', pageToken = '') {
showLoader();
let url = `https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics,contentDetails&chart=mostPopular&maxResults=${MAX_RESULTS}®ionCode=${REGION_CODE}&key=${API_KEY}`;
if (categoryId) url += `&videoCategoryId=${categoryId}`;
if (pageToken) url += `&pageToken=${pageToken}`;
try {
const response = await fetch(url);
const data = await response.json();
if (data.error) throw new Error(data.error.message);
currentNextPageToken = data.nextPageToken || '';
currentMode = 'popular';
displayVideos(data.items, !!pageToken);
} catch (error) {
console.error('Ошибка:', error);
alert('Ошибка: ' + error.message);
} finally {
hideLoader();
}
}
async function searchVideos(pageToken = '') {
const query = document.getElementById('search-input').value;
if (!query) return;
showLoader();
let url = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=${MAX_RESULTS}&q=${encodeURIComponent(query)}&type=video®ionCode=${REGION_CODE}&key=${API_KEY}`;
if (pageToken) url += `&pageToken=${pageToken}`;
try {
const response = await fetch(url);
const data = await response.json();
if (data.error) throw new Error(data.error.message);
const videoIds = data.items.map(item => item.id.videoId).join(',');
currentSearchPageToken = data.nextPageToken || '';
currentMode = 'search';
await fetchVideoDetails(videoIds, !!pageToken);
} catch (error) {
console.error('Ошибка:', error);
alert('Ошибка: ' + error.message);
} finally {
hideLoader();
}
}
async function fetchVideoDetails(videoIds, append = false) {
try {
const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics,contentDetails&id=${videoIds}&key=${API_KEY}`;
const response = await fetch(url);
const data = await response.json();
if (data.error) throw new Error(data.error.message);
displayVideos(data.items, append);
} catch (error) {
console.error('Ошибка:', error);
alert('Ошибка: ' + error.message);
}
}
function displayVideos(videos, append = false) {
allVideos = append ? [...allVideos, ...videos] : videos;
applyCurrentSort();
document.getElementById('load-more').style.display = (currentNextPageToken || currentSearchPageToken) ? 'block' : 'none';
}
function parseDuration(duration) {
const match = duration.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
const hours = parseInt(match[1]) || 0;
const minutes = parseInt(match[2]) || 0;
const seconds = parseInt(match[3]) || 0;
return hours * 3600 + minutes * 60 + seconds;
}
function formatDuration(duration) {
const seconds = parseDuration(duration);
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
let time = [];
if (hours > 0) time.push(hours.toString().padStart(2, '0'));
time.push(minutes.toString().padStart(2, '0'));
time.push(secs.toString().padStart(2, '0'));
return time.join(':');
}
function applyCurrentSort() {
const sortBy = document.getElementById('sort-select').value;
let sorted = [...allVideos];
switch(sortBy) {
case 'viewCount':
sorted.sort((a, b) => {
const aViews = parseInt(a.statistics.viewCount) || 0;
const bViews = parseInt(b.statistics.viewCount) || 0;
return bViews - aViews;
});
break;
case 'date_desc':
sorted.sort((a, b) =>
new Date(b.snippet.publishedAt) - new Date(a.snippet.publishedAt)
);
break;
case 'date_asc':
sorted.sort((a, b) =>
new Date(a.snippet.publishedAt) - new Date(b.snippet.publishedAt)
);
break;
case 'rating':
sorted.sort((a, b) => {
const aLikes = parseInt(a.statistics.likeCount) || 0;
const bLikes = parseInt(b.statistics.likeCount) || 0;
return bLikes - aLikes;
});
break;
case 'comments':
sorted.sort((a, b) => {
const aComments = parseInt(a.statistics.commentCount) || 0;
const bComments = parseInt(b.statistics.commentCount) || 0;
return bComments - aComments;
});
break;
case 'duration':
sorted.sort((a, b) => {
const aDuration = parseDuration(a.contentDetails.duration);
const bDuration = parseDuration(b.contentDetails.duration);
return bDuration - aDuration;
});
break;
default:
sorted = [...allVideos];
break;
}
displayedVideos = sorted;
renderVideos();
}
function renderVideos() {
const container = document.getElementById('videos-container');
if (!displayedVideos.length) {
container.innerHTML = '<p>Видео не найдены</p>';
return;
}
container.innerHTML = displayedVideos.map(video => `
<div class="video-item">
<h3>${video.snippet.title}</h3>
<img src="${video.snippet.thumbnails.medium.url}" alt="Превью">
<p>Канал: ${video.snippet.channelTitle}</p>
<p>Просмотры: ${parseInt(video.statistics.viewCount).toLocaleString() || 'Н/Д'}</p>
<p>Лайки: ${parseInt(video.statistics.likeCount).toLocaleString() || 'Н/Д'}</p>
<p>Опубликовано: ${new Date(video.snippet.publishedAt).toLocaleDateString()}</p>
<p>Длительность: ${formatDuration(video.contentDetails.duration)}</p>
<button onclick="openVideoModal('${video.id}')">Смотреть видео</button>
</div>
`).join('');
}
function showLoader() {
document.getElementById('loader').style.display = 'block';
}
function hideLoader() {
document.getElementById('loader').style.display = 'none';
}
document.getElementById('load-more').addEventListener('click', function() {
if (currentMode === 'popular' && currentNextPageToken) {
fetchPopularVideos(document.getElementById('category-select').value, currentNextPageToken);
} else if (currentMode === 'search' && currentSearchPageToken) {
searchVideos(currentSearchPageToken);
}
});
document.getElementById('country-select').addEventListener('change', function() {
REGION_CODE = this.value;
fetchVideoCategories();
fetchPopularVideos();
});
document.getElementById('category-select').addEventListener('change', function() {
fetchPopularVideos(this.value);
});
document.getElementById('sort-select').addEventListener('change', applyCurrentSort);
function openVideoModal(videoId) {
const modal = document.getElementById('video-modal');
const iframe = document.getElementById('video-iframe');
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1 `;
modal.style.display = 'block';
}
function closeVideoModal() {
const modal = document.getElementById('video-modal');
const iframe = document.getElementById('video-iframe');
iframe.src = '';
modal.style.display = 'none';
}
document.querySelector('.close').addEventListener('click', closeVideoModal);
window.addEventListener('click', function(event) {
const modal = document.getElementById('video-modal');
if (event.target === modal) {
closeVideoModal();
}
});
fetchVideoCategories();
fetchPopularVideos();
</script>
</body>