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

[jonsan32]

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>

[Dani]

I'm having a hard time understanding what it is that you're trying to do. You say 371 videos but I only see 3 videos in your HTML, and you say that's the working code. Why do you have specific conditionals for August 1st, 2nd, and 3rd?

I would do something such as this:

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

<div align="center" style="margin:50px;">
    <!-- iFrame for YouTube video starts out hidden -->
    <iframe id="myYouTube" style="display:none" 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>

<script>
function show_video_for_today () {
    // Get today's date
    var myDate = new Date();
    var hour = myDate.getHours();
    var date = myDate.getDate();
    var month = myDate.getMonth();
    var minute = myDate.getMinutes();

    // Determine today's video
    var video = '';

    // switch statement to show a different video depending upon date of the week
    switch (date) {
        case 1:
            video = '5BZsAW78ch8';
            break;
        case 2:
            video = 'jEyvsHcQcLw';
            break;
        case 30:
            video = 'fBHx90y2QFo';
            break;
        case 31:
            video = '_JMkjM4THd4';
            break;
        default:
            video = 'v2kh3s8RgYw';
    }

    // Set iFrame to show today's video
    $('iframe#myYouTube').attr('src', 'https://www.youtube.com/embed/' + video);

    // Show iFrame
    $('iframe#myYouTube').show();
 }
show_video_for_today();
</script>

This is just code I wrote here in this editor and completely untested. It actually just occurred to me that this might work due to a Chrome security feature that doesn't let you dynamically change the URL of an IFRAME. You might have to dynamically load the entire iframe via jQuery. I'll show you the code to do that if this doesn't work and this is on track with what it is you're trying to do. Let me know :)