How do I display a different embedded youtube video for every day of the year?

Question

I've been at this for months, and still can't figure it out. I have a playlist of 365 videos that I'd like to link with each day of the year to display on my site for the kids in my program to be inspired by. Here's what I have so far:

I must add the dates using "moments": Adding Days using Moment.JS

Someone suggested that I use the following script, but I couldn't figure out how to implement it whatsoever:

    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();

    today = mm + '/' + dd + '/' + yyyy;


    if(today == "07/07/2022"){
$("iframe").attr('src','https://www.youtube.com/embed/z7plt65m0Ts');
    }else if(today == "08/29/21"){
$("iframe").attr('src','some another video url');
    }else if(today == "08/30/21"){
$("iframe").attr('src','some another video url');
    }

And I've found a page that shows me how to show/hide divs during certain spans of a year, but I don't know how to spread it out to impact each and every day: Show/Hide divs based on date

Thank you for any help you're able to provide.

score 0 · Answer 1 · answered Aug 17 '22 at 18:23

The easiest thing is to get the day of the year and retrieve the appropriate video id from the YouTube playlist by using YouTube Data API v3 PlaylistItems: list endpoint as follows:

// Get the day of the year
var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = (now - start) + ((start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000);
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay) - 1;

// Use YouTube Data API v3 PlaylistItems: list endpoint to get today video id.
const URL = 'https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId=YOUR_PLAYLIST_ID&key=YOUR_API_KEY';
$.get(URL).then(function(data) {
    var videoId = $.parseJSON(data)['items'][day]['contentDetails']['videoId'];
    $("iframe").attr('src', 'https://www.youtube.com/embed/' + videoId);
});

How do I display a different embedded youtube video for every day of the year?

1 Answers1