# Videos on the website, what recommendation?

**URL:** <https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730>\
**Category:** Webdesign Help\
**Created:** [October 25, 2023, 1:27am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730 "2023-10-25T01:27:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gilmar](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gilmar/32/1533_2.png) [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\
**Post date:** [October 25, 2023, 1:27am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/1 "2023-10-25T01:27:00Z")

</div>

All the resources, both from Bootstrap and YouTube are terrible! So, how to add videos to the website efficiently and without slowing down the website?

---

<div class="post-metadata">

**Author:** ![malachiman](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/malachiman/32/5185_2.png) [@malachiman](https://forum.bootstrapstudio.io/u/malachiman)\
**Post date:** [October 25, 2023, 1:34am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/2 "2023-10-25T01:34:54Z")

</div>

I think that depends on what interaction you would like, are they auto running, or require user input?

You can use posters / images and dynamically load YouTube / Vimeo / HTML5 video with some basic javascript. You can have them play inline or in a popup modal etc.  
I personally like this approach, as then the user is only downloading what they need, and there is no unnecessary connections to places like YouTube. (I made a plug-in for another web app that does this.)

If you self host you will want to make sure your video is well optimised for the use case or use a CDN that will vary the bitrate of the video.

Shall I keep guessing what you want ? 😁

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 25, 2023, 3:24am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/3 "2023-10-25T03:24:40Z")

</div>

What constitutes “terrible?”

I have 16 linked YouTube videos on this page, and it scores 96 on Desktop and 76 on mobile on Pagespeed insights.

> **[Ten Tigers Kung Fu Academy Media | Kung Fu Videos | Huntington](https://ten-tigers.com/ten-tigers-kung-media.html)**
>
> Check Out Videos Of Our School, Our Classes, & Our Students In Action At Tournaments & Demonstrations! Call Or Stop In Today. Free Trial Class! Beginners Welcome. Experience The Ten Tigers Difference!

This page has 31 linked YouTube videos and uses my YouTube Video Lazy Load component, and the page loads instantly. 98 Desktop Pagespeed, and 77 Mobile. The only negative is you have to click each video twice to play.

> **[Karate, Aikido, Samurai Sword, Martial Arts | Bethlehem, Allentown](https://karatelehighvalley.com/aikido-masters-video-gallery.html)**
>
> Aikido, Ju Jutsu, Kempo Karate, Japanese Samurai Sword & Defensive Tactics For Ages 5 & Up. Free Month Special! Beginners Welcome!

I have a few websites that have self-hosted full-screen mp4 background videos at 1280x720 resolution added via HTML5 custom code. I get Desktop Lighthouse scores of 95-96 and mobile scores around 50-60. In real-world terms, the pages load instantly for me on 4G or my 300 mbps landline.

---

<div class="post-metadata">

**Author:** ![floydmanfloyd](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/floydmanfloyd/32/926_2.png) [@floydmanfloyd](https://forum.bootstrapstudio.io/u/floydmanfloyd)\
**Post date:** [October 25, 2023, 9:24am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/4 "2023-10-25T09:24:39Z")

</div>

@printninja Hi printninja. Don’t karate chop me but your h6 text on the videos page of your

> **[Karate, Aikido, Samurai Sword, Martial Arts | Bethlehem, Allentown](https://karatelehighvalley.com/aikido-masters-video-gallery.html)**
>
> Aikido, Ju Jutsu, Kempo Karate, Japanese Samurai Sword & Defensive Tactics For Ages 5 & Up. Free Month Special! Beginners Welcome!

could benifit from a min-height to keep all your videos horizontal alignment the same. 🕶

---

<div class="post-metadata">

**Author:** ![gilmar](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gilmar/32/1533_2.png) [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\
**Post date:** [October 25, 2023, 7:23pm UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/5 "2023-10-25T19:23:14Z")

</div>

I worked all day, but I finally got the result I wanted.

The video is 52.9 MB, it was uploaded to the hosting and you can see the result on the website, [Presentation](https://apresentacao.bss.design/).

The image that triggers the video is one of the last on the site.

 ![15-Anos-Ana-Clara-thumbnail](https://forum.bootstrapstudio.io/uploads/default/original/2X/c/c5ec3793e18951df4438eeedfb9ba13308d82dbb.png)

The PageSpeed Insights evaluation looked like this!

 ![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/c/c2e3dfcba4403eb12b7089d54cb877964c36a130.png)

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 25, 2023, 9:07pm UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/6 "2023-10-25T21:07:26Z")

</div>

Pretty damn impressive! Well done gilmar!

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 25, 2023, 9:11pm UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/7 "2023-10-25T21:11:44Z")

</div>

Thanks. I agree, it’s not a great layout. It’s probably something that we copied from an old website the client had made themselves many years ago. The page gets very little desktop traffic, so we don’t really bother much with the aesthetics.

---

<div class="post-metadata">

**Author:** ![gilmar](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gilmar/32/1533_2.png) [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\
**Post date:** [October 25, 2023, 9:46pm UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/8 "2023-10-25T21:46:25Z")

</div>

Thank you very much.

---

<div class="post-metadata">

**Author:** ![gilmar](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gilmar/32/1533_2.png) [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\
**Post date:** [October 25, 2023, 11:00pm UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/9 "2023-10-25T23:00:54Z")

</div>

I made an online component available in the BSS library, optimized video.

@martin If the code could be used to create a component in BSS, I believe it could help friends who use the program.

Note, the version on the website has been improved, I should update the component tomorrow or the day after.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 25, 2023, 11:41pm UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/10 "2023-10-25T23:41:28Z")

</div>

> [@gilmar](#):
>
> optimized video

This has nothing to do with you gilmar, but the online library’s search feature is terrible. If you search for “optimized video” or “optimized” your component doesn’t show up, but if you search for “video” it does show up.

Unfortunately, I cannot install your component it because it was created in the latest version of BSS (6.5x), and I’m stuck on 6.4.5 because I’m still running Windows 7.

---

<div class="post-metadata">

**Author:** ![gilmar](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gilmar/32/1533_2.png) [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\
**Post date:** [October 26, 2023, 12:43am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/11 "2023-10-26T00:43:50Z")

</div>

I’ll see if I can do it in a previous version of bootstrap later and let you know.  
Even better, tomorrow I’ll make new adjustments and then post the code here.

---

<div class="post-metadata">

**Author:** ![malachiman](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/malachiman/32/5185_2.png) [@malachiman](https://forum.bootstrapstudio.io/u/malachiman)\
**Post date:** [October 26, 2023, 1:08am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/12 "2023-10-26T01:08:25Z")

</div>

Typo is why…

Search `Optit` and it will come up 😁

![CleanShot 2023-10-26 at 14.07.28@2x](https://forum.bootstrapstudio.io/uploads/default/original/2X/9/9b945355b2b2b1a9aeef4f9a50dcab447e0d2346.png)

---

<div class="post-metadata">

**Author:** ![gilmar](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gilmar/32/1533_2.png) [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\
**Post date:** [October 26, 2023, 1:14am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/13 "2023-10-26T01:14:52Z")

</div>

I had already turned off the computer when I wrote here, but I am very grateful for the help.  
Tomorrow I will make adjustments and correct this, I am Brazilian and use Google translator for these purposes, 😂😂😂😂

---

<div class="post-metadata">

**Author:** ![malachiman](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/malachiman/32/5185_2.png) [@malachiman](https://forum.bootstrapstudio.io/u/malachiman)\
**Post date:** [October 26, 2023, 1:18am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/14 "2023-10-26T01:18:14Z")

</div>

All good. Take your pick with English too. I am in New Zealand, so we spell it the proper English way with an “s” instead of a “z”. Guess which country likes to be difficult 😆

It annoys me in CSS, we have to type “color” and in my comments and every other area of my life “colour”. But I do have to admit, removing the “u” makes sense here 😁

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 26, 2023, 3:07am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/15 "2023-10-26T03:07:32Z")

</div>

Sure you don’t have to create a component just for me, but if you want to post that code, that would be great!

I’m going to upgrade to BSS 6.5 soon. I have a Windows 10 box all ready to go. Just need to find the time (and space) to set everything up, and migrate 12 years of work from my old machine to my new one.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 26, 2023, 3:09am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/16 "2023-10-26T03:09:04Z")

</div>

Good catch @malachiman! I’m getting old an my eyesight is going. I didn’t even see it said “Optit…” (lol)

---

<div class="post-metadata">

**Author:** ![malachiman](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/malachiman/32/5185_2.png) [@malachiman](https://forum.bootstrapstudio.io/u/malachiman)\
**Post date:** [October 26, 2023, 3:11am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/17 "2023-10-26T03:11:59Z")

</div>

I had my glasses on 😆

Seriously I only saw it because the “z” stands out for me. Otherwise its very easy to miss.

---

<div class="post-metadata">

**Author:** ![gilmar](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gilmar/32/1533_2.png) [@gilmar](https://forum.bootstrapstudio.io/u/gilmar)\
**Post date:** [October 26, 2023, 10:25pm UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/18 "2023-10-26T22:25:07Z")

</div>

As promised here are the codes, I haven’t finished the consultations for resolutions, but this is easy for you.

HTML

```auto
<div class="card">
    <div class="card-header">
        <div class="clickable-video"><img class="img-fluid thumbnail" src="url" alt="Imagem" />
            <div class="play-btn"></div><img class="img-fluid play" src="url" alt="Imagem" />
            <div class="thumbnail"></div><video class="img-fluid custom-video" src="url" width="800" height="450" controls></video>
        </div>
    </div>
    <div class="card-body">
        <h3 class="text-primary card-text">title</h3>
        <p class="card-text">text</p>
    </div>
</div>

```

CSS

```auto
.clickable-video video {
  display: none;
}

.clickable-video.playing video {
  display: block;
}

.clickable-video .thumbnail {
  cursor: pointer;
}

.card-header {
  position: relative;
  padding: 0;
}

.card-header .clickable-video {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.card-header .thumbnail, .card-header video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

```

```auto
.play {
  left: calc(50% - 9%);
  top: calc(50% - 16%);
  content: "";
  position: absolute;
  width: 18%;
  height: 32%;
}

.play-btn {
  left: calc(50% - 13.5%);
  top: calc(50% - 24%);
  content: "";
  position: absolute;
  width: 27%;
  height: 48%;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-iteration-count: infinite;
  border-radius: 50%;
  border: 10px solid rgba(255,209,166,0.9);
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.5, 0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

```

JS

```auto
document.addEventListener("DOMContentLoaded", function () {
  const clickableVideos = document.querySelectorAll(".clickable-video");

  clickableVideos.forEach(function (clickableVideo) {
    const thumbnail = clickableVideo.querySelector(".thumbnail");
    const customVideo = clickableVideo.querySelector(".custom-video");

    customVideo.style.display = "none"; // Inicialmente, oculte o vídeo

    clickableVideo.addEventListener("click", function () {
      if (!clickableVideo.classList.contains("playing")) {
        clickableVideo.classList.add("playing");
        customVideo.style.display = "block";
        customVideo.play(); // Inicie a reprodução do vídeo
        thumbnail.style.display = "none";
      }
    });

    customVideo.addEventListener("ended", function () {
      // Quando o vídeo termina de ser reproduzido
      clickableVideo.classList.remove("playing");
      customVideo.style.display = "none";
      thumbnail.style.display = "block";
    });
  });
});

```

@printninja @malachiman @floydmanfloyd

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 27, 2023, 2:27am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/19 "2023-10-27T02:27:08Z")

</div>

Thank you. Great job! Bookmarking this topic.

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [October 27, 2023, 3:44am UTC](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730/20 "2023-10-27T03:44:19Z")

</div>

@gilmar

If you only want one video to play at a time, you can change your script to this

```javascript
window.addEventListener('DOMContentLoaded', function () {
  const clickableVideos = document.querySelectorAll('.clickable-video');
  const videos = document.querySelectorAll('.custom-video');
  const thumbnails = document.querySelectorAll('.thumbnail');

  clickableVideos.forEach((clickableVideo) => {
    const thumbnail = clickableVideo.querySelector('.thumbnail');
    const customVideo = clickableVideo.querySelector('.custom-video');

    clickableVideo.addEventListener('click', () => {
      videos.forEach((otherVideo) => {
        otherVideo.pause();
        clickableVideos.forEach((c) => c.classList.remove('playing'));
        thumbnails.forEach((tn) => (tn.style.display = 'block'));
      });

      clickableVideo.classList.add('playing');
      customVideo.play();
      thumbnail.style.display = 'none';
    });

    customVideo.addEventListener('ended', () => {
      clickableVideo.classList.remove('playing');
      thumbnail.style.display = 'block';
    });
  });
});

```

[Next page](https://forum.bootstrapstudio.io/t/videos-on-the-website-what-recommendation/10730.md?page=2)