如何根据日期切换YouTube嵌入视频URL 支持按年循环匹配

整体逻辑不需要依赖第三方服务，纯前端静态代码就能实现，一次配置后每年自动循环匹配，不需要后续维护。 #

前期准备 #

你已经在Google表格里整理好了日期和视频的对应关系，只需要把371个视频ID按「起始日第一个视频到最后一个视频」的顺序整理好就行，不需要绑定具体年份，只需要保留播放顺序。
默认YouTube嵌入代码的结构不需要改，只需要预留一个带固定ID的iframe标签作为容器即可。 #

核心实现代码 #

1. 页面嵌入部分 #

把下面的iframe代码放到你需要展示视频的页面位置，和你原来的嵌入代码参数完全一致，只是留空src属性等JS动态填充：

<iframe id="dailyVideoFrame" width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2. 逻辑脚本部分 #

把下面的JS代码放到页面底部，只需要修改两个可配置项即可：

// ========== 仅需修改此处配置 ==========
// 每年第一个视频对应的固定起始日期，格式为[月份, 日期]，比如1月1日就填[1,1]，2月14日就填[2,14]
const ANNUAL_START_DATE = [1, 1];
// 按播放顺序排列的371个视频ID，第一个元素就是起始日要展示的视频ID
const VIDEO_ID_LIST = [
  "z7plt65m0Ts",
  // 后续依次补全剩余370个视频ID即可，可直接从Google表格批量导出格式后粘贴
];
// ======================================

const TOTAL_VIDEO_COUNT = VIDEO_ID_LIST.length;

// 计算两个日期的天数差
function calcDayDiff(compareDate, baseDate) {
  const compare = new Date(compareDate.getFullYear(), compareDate.getMonth(), compareDate.getDate());
  const base = new Date(baseDate.getFullYear(), baseDate.getMonth(), baseDate.getDate());
  return Math.round((compare.getTime() - base.getTime()) / (24 * 60 * 60 * 1000));
}

function loadDailyVideo() {
  const today = new Date();
  const currentYear = today.getFullYear();
  
  // 生成当前年度的起始日期
  let startDayThisYear = new Date(currentYear, ANNUAL_START_DATE[0] - 1, ANNUAL_START_DATE[1]);
  let dayOffset = calcDayDiff(today, startDayThisYear);

  // 若当前日期早于本年度起始日，自动取上一年度起始日计算偏移，避免空值
  if (dayOffset < 0) {
    const startDayLastYear = new Date(currentYear - 1, ANNUAL_START_DATE[0] - 1, ANNUAL_START_DATE[1]);
    dayOffset = calcDayDiff(today, startDayLastYear);
  }

  // 对视频总数取模，自动处理跨年循环，不会出现索引超出范围的问题
  const targetIndex = dayOffset % TOTAL_VIDEO_COUNT;
  const targetVideoId = VIDEO_ID_LIST[targetIndex];

  // 替换iframe地址加载对应视频
  const videoFrame = document.getElementById('dailyVideoFrame');
  videoFrame.src = `https://www.youtube.com/embed/${targetVideoId}`;
}

// 页面加载完成后自动执行
document.addEventListener('DOMContentLoaded', loadDailyVideo);

配置说明 #

• 首次配置只需要填好起始月日、按顺序补全所有视频ID即可，后续不需要每年更新代码，会自动按年循环匹配
• 如果需要统一按指定时区计算日期（比如不跟随访问者本地时区，固定用东八区日期），只需要在today变量生成时加上时区偏移修正即可，核心匹配逻辑不需要改动
• Google表格内的视频ID可以直接用表格公式批量拼接成带双引号和逗号的格式，直接粘贴到VIDEO_ID_LIST数组里即可，不需要手动逐条编辑

内容的提问来源于stack exchange，提问作者Jon Sanders