Тест для скриптов

</div>

</div>

</div>

<style>

.yt-widget{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;max-width:1100px;margin:0 auto}

.yt-card{background:#fff;border-radius:12px;overflow:hidden;width:320px;box-shadow:0 2px 12px rgba(0,0,0,0.08);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;display:block}

.yt-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.14)}

.yt-thumb{position:relative;width:100%;padding-top:56.25%;background:#eee;overflow:hidden}

.yt-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;background:rgba(255,0,0,0.88);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}

.yt-card:hover .yt-play{opacity:1}

.yt-play svg{width:22px;height:22px;fill:#fff;margin-left:3px}

.yt-info{padding:14px 16px 18px}

.yt-title{font-size:14px;font-weight:600;line-height:1.4;color:#111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.yt-date{margin-top:8px;font-size:12px;color:#999}

.yt-skeleton .yt-thumb{background:#e0e0e0;padding-top:56.25%}

.yt-skeleton .yt-title-sk{height:14px;background:#e0e0e0;border-radius:4px;margin:14px 16px 6px;animation:pulse 1.2s infinite}

.yt-skeleton .yt-title-sk2{height:14px;background:#e0e0e0;border-radius:4px;margin:0 16px 18px;width:60%;animation:pulse 1.2s infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

.yt-error{text-align:center;color:#999;font-size:13px;padding:20px;width:100%}

</style>

(function() {

var API_KEY = 'AIzaSyBqtLBZyc-BTM4omVG_SbP9nQR1h504JAQ';

var CHANNEL_ID = 'UCLJl8-mbCfolWMkh1F1qfjA';

var MAX_VIDEOS = 3;

var FETCH_COUNT = 10;

var widget = document.getElementById('yt-widget');

function formatDate(d) {

return new Date(d).toLocaleDateString('ru-RU',{day:'numeric',month:'long',year:'numeric'});

}

function parseDuration(iso) {

var m = iso.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);

if (!m) return 0;

return (parseInt(m[1]||0)*3600)+(parseInt(m[2]||0)*60)+(parseInt(m[3]||0));

}

fetch('https://www.googleapis.com/youtube/v3/search?key='+API_KEY+'&channelId='+CHANNEL_ID+'&part=id&order=date&type=video&maxResults='+FETCH_COUNT)

.then(function(r){return r.json()})

.then(function(data){

if(data.error) throw new Error(data.error.message);

var ids = data.items.map(function(i){return i.id.videoId});

return fetch('https://www.googleapis.com/youtube/v3/videos?key='+API_KEY+'&id='+ids.join(',')+'&part=snippet,contentDetails');

})

.then(function(r){return r.json()})

.then(function(data){

if(data.error) throw new Error(data.error.message);

var videos = data.items.filter(function(v){

return parseDuration(v.contentDetails.duration) >= 180;

}).slice(0, MAX_VIDEOS);

if(!videos.length) throw new Error('Нет длинных видео');

widget.innerHTML = videos.map(function(v){

return '<a class="yt-card" href="https://www.youtube.com/watch?v='+v.id+'" target="_blank" rel="noopener">'

+'<div class="yt-thumb"><img src="https://i.ytimg.com/vi/'+v.id+'/hqdefault.jpg" loading="lazy">'

+'<div class="yt-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div></div>'

+'<div class="yt-info"><div class="yt-title">'+v.snippet.title+'</div>'

+'<div class="yt-date">'+formatDate(v.snippet.publishedAt)+'</div></div></a>';

}).join('');

})

.catch(function(e){

widget.innerHTML='<div class="yt-error">Не удалось загрузить видео.<br>'+e.message+'</div>';

});

})();

</script>