Suggestions for a page with lots of youtube videos please

Beginners
1

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

2

Take a look at what I did here.

3

https://karatelehighvalley.com/aikido-masters-video-gallery.html
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.

4

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].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();
 
function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
 
function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=1&rel=0");
    iframe.setAttribute("frameborder", "0");
	iframe.setAttribute("allowfullscreen","1");
	iframe.setAttribute("showinfo","1");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}

Hope this helps you.

1 Like
5

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

6

I tried @Printninja css and js on https://mcgraphics.us/poetry/new.html
No idea if I got it right. The css grid seems to work.
But I’m getting sidetracked by how ugly the thumbnails are.