Suggestions for a page with lots of youtube videos please

Suggestions for a pg page that will contain lots of youtube videos please - ‘’ I need some ideas. Help please

Take a look at what I did here.
Side note: I’m an aikido fan, used to take it. Good work.
How did you get your videos to resize smaller? No css grid.

I built the website using the Bootstrap framework, which uses flexbox for their grid. CSS grid is different. I’m sorry, but I have no experience with CSS grid.

The videos are just the YouTube generated embed code placed inside a div with the following CSS class assigned to it…

.youtube-container {
  display: block;
  margin: 10px auto 25px;
  width: 100%;
  max-width: 600px;


Bootstrap’s breakpoints manage the resizing of the columns depending on the screen width.

Then I used the below javascript to allow the entire page to load quickly by just grabbing a frame from each vid and placing a generic “play button” image on top. The actual video isn’t fetched from YouTube until the person clicks on the video.

(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n];
        p.onclick = labnolIframe;
function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//' + id + '/hqdefault.jpg"><div class="play-button"></div>';
function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//" + + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=1&rel=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);

Hope this helps you.

1 Like

The js is really helpful. Will definitely give it a try. Thanks so much.

I tried @Printninja css and js on
No idea if I got it right. The css grid seems to work.
But I’m getting sidetracked by how ugly the thumbnails are.