Member Avatar for 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>
  • 2 Contributors
  • 1 Reply
  • 108 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

A single player element is the right approach here — do not inject 300+ iframes into the DOM. is on the right track: update one player for the current day instead of showing/hiding hundreds of elements. For robustness and smoother control (load vs. cue, mute/unmute, programmatic play/pause, lower reflows) prefer the YouTube IFrame Player API over repeatedly swapping raw src strings.

Store the 371 IDs in a compact array or an external JSON file, compute today's index (day-of-year), then pick that ID from the array. Example of the day-of-year lookup (no IDs shown here):

var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var dayOfYear = Math.floor((now - start) / 86400000);
var videoId = ids[(dayOfYear - 1) % ids.length];

Create the player once and call loadVideoById(videoId) when the page loads or at midnight. See the official YouTube IFrame API for the exact lifecycle and methods. Notes and troubleshooting: autoplay may be blocked unless the player is muted (see Chrome autoplay policy at Chromium autoplay guide); a site Content Security Policy or an iframe sandbox can stop external embeds (see MDN iframe docs at iframe element). Keep the ID list external for easy edits, and use local caching (localStorage) if you want to avoid reloading the mapping on every visit.

Member Avatar for 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 :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.