I'm testing out youtube videos compared to vimeo with BSS. I'm not happy with the 2.2MB Javascript parsing of YouTube.
See: https://gtmetrix.com/reports/ferdesign.nl/IfIeHBpF
When using random Vimeo videos instead, it's as small as 10.3KiB.
See: https://gtmetrix.com/reports/ferdesign.nl/AoKX38jf
_
However I need to use YouTube for my project, without going into detail.
Is there anyway I can defer parsing JavaScript to reduce blocking of page rendering?
Hoi Fer
You can try with Nano Gallery2. It is very easy to use with Bootstrap Studio, you can have both youtube and vimeo videos in your gallery.
But if you are going to have many youtube videos on your website I suggest you start a youtube channel so your visitors can watch your videos on youtube. I made a version of your famous New Age site with some youtube videos.
oranje boven hosted on bootstrap free hosting
GT speedtest on the free hosting
oranje-boven hosted on my server
nog een prettige dag
Oranje boven hé
Do you mean like I've done on this page here?
http://karatelehighvalley.com/aikido-masters-video-gallery.html
@kuligaposten @Printninja
Yep!/Ja! =) Seems this workaround does the job.
How do you implement such 'widget' into BSS?
I inspected the source of your pages. I see a reference for the stylesheet and a div class with a .js in it.
Is that all there is to it?
Yes. Create a new .js file and use the following code...
(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 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);
}
Then for each of your videos, add a custom code component and use the following code
<div class="youtube-container">
<div class="youtube-player" data-id="(your video ID Here)"></div>
</div>
And just replace the (your video ID Here) with the ID of your video on YouTube.
Nice site Printninja +1
on the Photo Gallery Page you forgot the Custom Code. The div for the album show Custom Code and no photos shows up.
see also https://github.com/paulirish/lite-youtube-embed
@Printninja @marrco
Both great examples to tackle this! Many thanks =)
See before result: https://gtmetrix.com/reports/djmiximprover.com/WvwNSCuB
And after result: https://gtmetrix.com/reports/djmiximprover.com/6B2F2NXp .
...However...
I got something odd going on. While the videos (bottom) look good on desktop, they seem to look good at 1st initial loading on mobile.
But when u tap them they get bigger. So big, you barely can't see the play-button to tap on, anymore.
.
Am I doing something wrong?
Since this doesn't happen on the video in the 'features' section.
@kuligaposten
Re: photos... yes, I'm aware. That particular part of the site was put on the back burner temporarily as it was not crucial to the client since he has so many other places (FB, Instagram) where people can see photos.
In fact, I've been trying to get my clients to get away from the desire to have large photo galleries on their websites since it consume lots of space and bandwidth, and there are so many better options these days where they can just upload their pics easily from their phones (again, FB, Instagram) as opposed to having to create a complicated means for them to upload pics to their own website.
Unless it's for a client like a photographer, etc, who specifically wants to showcase their photos, or a company that wants to show galleries or products, etc.
@ferdesign
I see what you are referring to. It doesn't appear as though you used my method, but instead used the one here...https://github.com/paulirish/lite-youtube-embed
The videos appear to be embedded in iframes with fixed dimensions, which is undoubtedly what is causing your problem. <iframe width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/mu15hVxyTiw?autoplay=1"></iframe>
If you use my method, the videos widths are set at 100%, and will size according to the size of the Bootstrap Columns, so you won't have this problem. The downside though is that you technically have to click my videos twice, once to grab it from YouTube, and a second time for it to play. I don't think this was the case when I first devised this method, but the browser companies have become absolute nazis when it comes to anything autoplaying.
@Printninja
Thank you, but when I use your method the videos don't respect the Column max-width value either. Then I get a small representation at initial load, and pop up bigger when I play them. See here
I think something in my code is overwriting, but I don't know what. Frustrated :/
You seem to missing some necessary CSS classes...
Add all of the following to your stylesheet...
.youtube-container {
display: block;
margin: 10px auto 25px;
width: 100%;
max-width: 600px;
}
.youtube-player {
display: block;
width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
display: block;
}
img.youtube-thumb {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
height: auto;
}
div.play-button {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
This should fix your sizing issue.
@Printninja Oops! I didn't saw it mentioned before, so I thought it was all good without.
However, I now copy/pasted the css to its own .css , and I can clearly see it's taking over some settings....
But it looks out of place on initial + when playing now.
How about this. I will upload a component to the online library with all the necessary js and css, and use some random example video that you can replace, and then you can try just adding the whole thing as a component, put in your own video ID code and see if then works for you. Give me until Friday evening to do this.
Sounds great @Printninja ! Thank you for taking this effort. I'll give u feedback when u got it up and tell me the name of the component.
@ferdesign
Component is uploaded in online library. Entitled: Youtube Video Lazyload
It's in a full width column, but you should be able to resize the column to whatever width you want, and the placeholder image and start button should resize responsively.
@Printninja
Thanks to your Component, I traced down what was causing the out-of-placement. Now I knew it wasn't the added code of your method, or the other one mentioned.
Something I molested in the Section #video for some reason.
Now it works all good.
And great end result =)
Thanks again!
My pleasure. Your site looks good. It's a shame that Chrome blocks autoplaying of videos, forcing you to hit the video play button, but in Firefox they play with just the first click.