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?
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 ? 
1 Like
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.
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.
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.
1 Like
@printninja Hi printninja. Don’t karate chop me but your h6 text on the videos page of your
could benifit from a min-height to keep all your videos horizontal alignment the same. 
1 Like
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.
The image that triggers the video is one of the last on the site.
The PageSpeed Insights evaluation looked like this!
Pretty damn impressive! Well done gilmar!
2 Likes
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.
Thank you very much.
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.
2 Likes
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.
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.
Typo is why…
Search Optit and it will come up
1 Like
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, 
2 Likes
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
1 Like
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.
1 Like
Good catch @malachiman! I’m getting old an my eyesight is going. I didn’t even see it said “Optit…” (lol)
1 Like
I had my glasses on
Seriously I only saw it because the “z” stands out for me. Otherwise its very easy to miss.
1 Like
As promised here are the codes, I haven’t finished the consultations for resolutions, but this is easy for you.
HTML
<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
.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%;
}
.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
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";
});
});
});
1 Like
Thank you. Great job! Bookmarking this topic.
1 Like
If you only want one video to play at a time, you can change your script to this
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';
});
});
});
1 Like