# Suggestions for a page with lots of youtube videos please

**URL:** <https://forum.pinegrow.com/t/suggestions-for-a-page-with-lots-of-youtube-videos-please/5892>\
**Category:** Beginners\
**Created:** [November 12, 2021, 3:36pm UTC](https://forum.pinegrow.com/t/suggestions-for-a-page-with-lots-of-youtube-videos-please/5892 "2021-11-12T15:36:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [November 12, 2021, 3:36pm UTC](https://forum.pinegrow.com/t/suggestions-for-a-page-with-lots-of-youtube-videos-please/5892/1 "2021-11-12T15:36:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [November 15, 2021, 4:47am UTC](https://forum.pinegrow.com/t/suggestions-for-a-page-with-lots-of-youtube-videos-please/5892/2 "2021-11-15T04:47:55Z")

</div>

> [@kat](#):
>
> poetry.la

Take a look at what I did here.

> **[Aikido Masters Self Defense Academy Video Gallery](https://karatelehighvalley.com/aikido-masters-video-gallery.html)**
>
> We've Compiled A Collection Of Videos About Our School, Our Programs, And Our Training Philosophy

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [November 15, 2021, 6:17pm UTC](https://forum.pinegrow.com/t/suggestions-for-a-page-with-lots-of-youtube-videos-please/5892/3 "2021-11-15T18:17:31Z")

</div>

`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.

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [November 16, 2021, 1:44am UTC](https://forum.pinegrow.com/t/suggestions-for-a-page-with-lots-of-youtube-videos-please/5892/4 "2021-11-16T01:44:45Z")

</div>

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.

```auto
(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.

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [November 16, 2021, 3:06am UTC](https://forum.pinegrow.com/t/suggestions-for-a-page-with-lots-of-youtube-videos-please/5892/5 "2021-11-16T03:06:47Z")

</div>

> [@Printninja](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [November 17, 2021, 12:29am UTC](https://forum.pinegrow.com/t/suggestions-for-a-page-with-lots-of-youtube-videos-please/5892/6 "2021-11-17T00:29:10Z")

</div>

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.