HTML Script Untuk Menampilkan Channel YT di Blogspot

Berikut ini adalah script HTML yang bisa di aplikasikan pada Halaman baru atau Widget di blogspot.com.

Jangan lupa sertakan API Key YT dari Google Console anda.

Sistem kerjanya : Copy Channel YT anda kemudian pastekan di kolom yang tersedia, pilih video yang terbaru atau yang terpopuler kemudian klik tampilkan +12 video.

Jika koneksi internet anda mumpuni dan tentunya tidak lemot bisa klik tampilkan 10 lagi

Klik LINK ini untuk melihat sistem kerjanya

<style>
.yt-multi-wrap { background:#0a0a0a; padding:10px; border-radius:8px; }
.yt-multi-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.yt-multi-controls input,.yt-multi-controls select,.yt-multi-controls button {
  padding:8px 10px; background:#222; border:1px solid #333; color:#fff; border-radius:6px; font-size:14px;
}
.yt-multi-controls input { flex:1; min-width:180px; }
.yt-multi-controls button { background:#f00; cursor:pointer; font-weight:600; }
.yt-multi-controls button:disabled { background:#444; cursor:not-allowed; }
.yt-multi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.yt-multi-grid iframe { width:100%; aspect-ratio:16/9; border:none; background:#000; }
.yt-multi-stats { font-size:12px; color:#888; margin:8px 0; }
@media(max-width:600px){.yt-multi-grid{grid-template-columns:repeat(2,1fr);} }
</style>
<div class="yt-multi-wrap">
  <div class="yt-multi-controls">
    <input id="ytChannel" placeholder="Contoh link channel: youtube.com/@area27b" />
    <select id="ytOrder">
      <option value="date" />Terbaru
      <option value="viewCount" />Terpopuler
    </select>
    <button onclick="ytLoad()" id="ytBtnLoad">Muat 12 Video</button>
    <button onclick="ytLoadMore()" id="ytBtnMore" style="display:none;">+ 10 Lagi</button>
  </div>
  <div class="yt-multi-stats" id="ytStats">Masukkan link channel untuk mulai.</div>
  <div class="yt-multi-grid" id="ytGrid"></div>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
const YT_API_KEY = 'API Key Google Console Milik Anda';
let ytPlayers = [], ytVideoIds = [], ytChannelId = '', ytNextPage = '', ytCurrentOrder = '';
function onYouTubeIframeAPIReady() {}
async function ytLoad() {
  const url = document.getElementById('ytChannel').value;
  const order = document.getElementById('ytOrder').value;
  const btnLoad = document.getElementById('ytBtnLoad');
  const btnMore = document.getElementById('ytBtnMore');
  const stats = document.getElementById('ytStats');
  const grid = document.getElementById('ytGrid');
  btnLoad.disabled = true;
  btnLoad.textContent = 'Loading...';
  grid.innerHTML = ''; ytPlayers = []; ytVideoIds = []; ytNextPage = '';
  ytCurrentOrder = order;
  try {
    ytChannelId = await getYtChannelId(url);
    if(!ytChannelId) throw 'Link channel salah. Pakai format /@username atau /channel/UCxxx';
    await fetchAndRenderVideos(12, true);
    btnMore.style.display = 'inline-block';
  } catch(err) {
    stats.textContent = 'Error: ' + err;
  } finally {
    btnLoad.disabled = false;
    btnLoad.textContent = 'Muat Ulang';
  }
}
async function ytLoadMore() {
  if(!ytNextPage) return;
  const btnMore = document.getElementById('ytBtnMore');
  btnMore.disabled = true;
  btnMore.textContent = 'Loading...';
  await fetchAndRenderVideos(12, false);
  btnMore.disabled = false;
  btnMore.textContent = '+ 10 Lagi';
  if(!ytNextPage) btnMore.style.display = 'none';
}
async function fetchAndRenderVideos(count, isFirst) {
  const stats = document.getElementById('ytStats');
  const grid = document.getElementById('ytGrid');
  let url = `https://www.googleapis.com/youtube/v3/search?key=${YT_API_KEY}&channelId=${ytChannelId}&part=id&order=${ytCurrentOrder}&maxResults=${count}&type=video`;
  if(ytNextPage) url += `&pageToken=${ytNextPage}`;
  const data = await fetch(url).then(r => r.json());
  if(data.error) throw data.error.message;
  if(!data.items.length) throw 'Tidak ada video ditemukan';
  ytNextPage = data.nextPageToken || '';
  data.items.forEach((video, i) => {
    const videoId = video.id.videoId;
    ytVideoIds.push(videoId);
    const index = ytPlayers.length;
    const div = document.createElement('div');
    div.id = `yt-player-${index}`;
    grid.appendChild(div);
    const player = new YT.Player(`yt-player-${index}`, {
      videoId: videoId,
      playerVars: { autoplay:1, mute:1, controls:0, loop:1, playlist:videoId, modestbranding:1 },
      events: { 'onReady': e => e.target.playVideo() }
    });
    ytPlayers.push(player);
  });
  stats.textContent = `Total ${ytPlayers.length} video dimuat. Semua di-mute otomatis.`;
}
async function getYtChannelId(url) {
  if(url.includes('/channel/')) return url.split('/channel/')[1].split(/[/?]/)[0];
  if(url.includes('/@')) {
    const username = url.split('/@')[1].split(/[/?]/)[0];
    const data = await fetch(`https://www.googleapis.com/youtube/v3/channels?key=${YT_API_KEY}&forHandle=@${username}&part=id`).then(r=>r.json());
    return data.items?.[0]?.id;
  }
  if(url.includes('/c/') || url.includes('/user/')) {
    const username = url.split('/').pop().split(/[/?]/)[0];
    const data = await fetch(`https://www.googleapis.com/youtube/v3/channels?key=${YT_API_KEY}&forUsername=${username}&part=id`).then(r=>r.json());
    return data.items?.[0]?.id;
  }
  return null;
}
</script>