kuligaposten, thanks, it seems to be working. If you’re so advanced, maybe you know how I can add other parameters besides start-time? I mean such as: not only the start, but the end ("&start=111&end=168"), autoplay=1, frameborder=0, not show recommended videos and so on?
I clarified in support. They said that all YouTube link parameters can only be applied through the “Custom code component”.
kuligaposten, I need to put several dozen video testimonials on the page. If I just insert the code, it will slow down the loading of the page a lot. There will be a lot of simultaneous requests to YouTube server.
On Wordpress I used modal window plugins like “prettyphoto” and similar. There was only a picture on the page, the visitor clicked on it and already in the modal window started autoloading the video. It seems that until you click, there was no request to YouTube server.
I see that the BSS has a “Modal” component. But that’s how to adapt “Custom Code” with YouTube link I can’t figure out.
I skipped the modal thing and made a Testimonial slider instead. No video is loaded until you click a button in this case.Take a look at the link above. I use one Responsive embed for all videos
This in the markup for the trigger can be anything you like in this case a Button
If you want to play the whole video set data-bs-start and data-bs-end to 0
var video = document.getElementById('video')
if(video){
var start = v.getAttribute('data-bs-start')
var end = v.getAttribute('data-bs-end')
var videoSrc = v.getAttribute('data-bs-video')
var playThis = 'https://www.youtube.com/embed/' + videoSrc + '?autoplay=1&start='+start+'&end='+end+'&controls=0&playlist=0&loop=1&rel=0'
video.src = playThis
var length = (end - start) * 1000
setTimeout(function(){
video.src = ''}, length)
}
}
If you want the controls in the video set controls=1
the &playlist=0 and &loop=1 makes you have no recommended videos when the video ends
This is for Bootstrap 5 and no jQuery is needed
Let me know if you want a link to the example bs.design
I’ve also uploaded a component to the online BSS library called Youtube Video Lazyload 2020 which you can see in action on this page… https://karatelehighvalley.com/aikido-masters-video-gallery.html
34 videos and the page loads instantly. It scores a respectable 74 mobile / 92 desktop on Google Page Speed Insights.
And what such a button in the component browser to choose, where there will be so many additional fields: data-bs-video, data-bs-start, data-bs-end, onclick, etc.?
Sorry, it’s something I cobbled together from a script I found online years ago to solve a specific problem for the client. I’m not a javascript programmer, so I wouldn’t know how to modify it to make it work with your time-based requirements. But if anyone can figure it out, it would be @kuligaposten
