How can I replace a string within a URL by date?

Question

It's taken me months to figure out how to show/hide certain content by days throughout the year, but now I'm stuck because the code gets too big for any browser to handle once I add every day for the entire year within the script.

Is there a way I can simply substitute each video's code for that day within just one embedded element? Trying to embed and then hide 371 videos is just too much.

The URL strings I'd need to swap out each day look like this:

5BZsAW78ch8
jEyvsHcQcLw
fBHx90y2QFo
_JMkjM4THd4
v2kh3s8RgYw
uhrrTXo1uRo

And the iframe code is like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/v2kh3s8RgYw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The working code (for just 3 days) is as follows:

<script src="http://code.jquery.com/jquery-1.12.0.js"></script>

<div align="center" style="margin:50px;">
<div class="show"></div>
<div class="vid5"><iframe width="560" height="315" src="https://www.youtube.com/embed/v2kh3s8RgYw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="vid6"><iframe width="560" height="315" src="https://www.youtube.com/embed/uhrrTXo1uRo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="vid7"><iframe width="560" height="315" src="https://www.youtube.com/embed/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>


</div>

<script>
function show_hide_me () {
  var myDate = new Date();
  var hour = myDate.getHours();
  var date = myDate.getDate();
  var month = myDate.getMonth();
  var minute = myDate.getMinutes()
if (month == 8 && date > 0 && date < 2){$('.vid5').show();$('.show').hide();} else {$('.vid5').hide();$('.show').show();}
if (month == 8 && date > 1 && date < 3){$('.vid6').show();$('.show').hide();} else {$('.vid6').hide();$('.show').show();}
if (month == 8 && date > 2 && date < 4){$('.vid7').show();$('.show').hide();} else {$('.vid7').hide();$('.show').show();}

 }
show_hide_me();
</script>

var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = now - start;
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);

var iframe_template = '<iframe width="560" height="315" src="https://www.youtube.com/embed/{0}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';


// Set one video "case" for all days, for this you'll have to add 366 video_ids/cases...
switch (day) {
    case 1:
        document.getElementById("myDiv").innerHTML = iframe_template.replace("{0}", "5BZsAW78ch8");
        break;
    case 2:
        document.getElementById("myDiv").innerHTML = iframe_template.replace("{0}", "jEyvsHcQcLw");
        break;
    case 3:
        document.getElementById("myDiv").innerHTML = iframe_template.replace("{0}", "fBHx90y2QFo");
        break;
    // And so on...
    default:
        // You should have a default video - just in case: 
        var default_video_id = "ouf0ozwnU84";
        document.getElementById("myDiv").innerHTML = iframe_template.replace("{0}", default_video_id);
        break;
}

<div class="myDiv"></div>

Marco Aurelio Fernandez Reyes · Accepted Answer · 2022-09-02T19:29:22.593

1

You could modify your code in order to keep all video_ids ready for set once the day of the year is met with a condition.

I show here a brief xample, but, you have to modify your current code and set an ID to one of your divs that will contain the iframe, in this case, I'm using "myDiv" as ID.

Example:

<div id="myDiv"></div>

Credit: Answer to: "JavaScript calculate the day of the year (1 - 366)"

Modified code (please note, this is just how I would do it):

var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = now - start;
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);

var iframe_template = '<iframe width="560" height="315" src="https://www.youtube.com/embed/{0}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';


// Set one video "case" for all days, for this you'll have to add 366 video_ids/cases...
switch (day) {
    case 1:
        document.getElementById("myDiv").innerHTML = iframe_template.replace("{0}", "5BZsAW78ch8");
        break;
    case 2:
        document.getElementById("myDiv").innerHTML = iframe_template.replace("{0}", "jEyvsHcQcLw");
        break;
    case 3:
        document.getElementById("myDiv").innerHTML = iframe_template.replace("{0}", "fBHx90y2QFo");
        break;
    // And so on...
    default:
        // You should have a default video - just in case: 
        var default_video_id = "ouf0ozwnU84";
        document.getElementById("myDiv").innerHTML = iframe_template.replace("{0}", default_video_id);
        break;
}

Side note: It's up to you, but, I would consider a server-side operation that returns the video_id for the day and not keep all your videos_id hard-coded.

edited Sep 02 '22 at 19:29

answered Sep 01 '22 at 19:48

Marco Aurelio Fernandez Reyes

2,071
2
9
33

Would the HTML for this be
or just nothing at all? Also, how would your math equate to the different cases? Do I have to put a start date somewhere? Sorry, in advance, for my ignorance. And thank you for your time. – Jon Sanders Sep 02 '22 at 01:05
1

@JonSanders yes, `
` alone - since my suggested code injects the iframe/html code. About your second point, no, you don't need to add a start date - because the start date is stored in the variable called `now`. – Marco Aurelio Fernandez Reyes Sep 02 '22 at 13:24
Something must be missing. I've edited my original post to include your suggestion as a snippet, and it doesn't work. I'm sure I'm missing something simple, but I can't tell. My thought was the date because I assume *now* would perpetually change.... and that doesn't seem to be ideal for getting the next video. Thank you so much for all your time. I'm not very smart at this stuff AT ALL haha – Jon Sanders Sep 02 '22 at 18:10
1

@JonSanders my bad, please change from `
` to `
` - I've edited my answer. I understand that everyday you want a different video, so, with the code I posted, every day a new video will be injected. For this, you need to add 366 cases with 366 different video_ids, though – Marco Aurelio Fernandez Reyes Sep 02 '22 at 19:28
That did do the trick, and I'll add all the cases tonight. But I've only got yours showing the default video, and I can't even fathom how this will work to show me each day's video without a start date. For instance, my goal is to show video ending in 5BZsAW78ch8 on September 1st, the video ending in jEyvsHcQcLw on September 2nd, fBHx90y2QFo on the 3rd, etc. I'm planning to adjust the start date each year since the videos will be on different days of the year (but the same order). After I add all the cases, will this script manage all that? If so, how so? I'm so perplexed haha. Thanks a ton! – Jon Sanders Sep 02 '22 at 21:41
1

OK, I figured it out after I added all the cases. It's going by day of the year. Had to go into your originally sourced post as well. Thanks a ton for everything. Have a great day. – Jon Sanders Sep 03 '22 at 06:25
1

Well done, @JonSanders - please consider also upvote the original answer as well - after all, the code provided there helped us :) – Marco Aurelio Fernandez Reyes Sep 05 '22 at 14:11
1

Oh, I thought I upvoted everything already. Will do. Thanks again for everything. – Jon Sanders Sep 06 '22 at 15:10

How can I replace a string within a URL by date?

1 Answers1