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

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 ></div>
<div ><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 ><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 ><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 ></div>

CodePudding user response：

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.