How do I embed a YouTube video from a specific time?

Friends, hi! Please help me.

It’s fundamentally important for me to put videos on the page that start with the time I want.

I’m talking about links like this: - YouTube&t=12s

For example, I only need to show one phrase from a two-hour interview. Or I need to post the video already after the intro. And so on.

I’ve put these kinds of links in the primitive page builder on Wordpress before, and everything worked fine.

But in BBS these links don’t work: in option’s panel I put the link with time, but in fact the video starts from the beginning :frowning:

How can I make links work together with time?

If you use the responsive embed like this

https://www.youtube.com/embed/9FvvbVI5rYA?start=12

the number after start is in seconds

here is an example

That is, the native functionality of the BSS does not imply this (through the “option’s panel”)? Do I have to use “custom code”?

No custom code just add the link in the options panel

You have to use the responsive embed, with the video component BSS cut the link after the question mark

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?

You have to do that with javascript and the YouTube api, because BSS change all & to & on your links and YouTube don’t accept that.

or edit your exported HTML and delete the amp; after the &

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.

Can you tell me?

You don’t need custom code.

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

this is the markup for the responsive embed

and this is the javascript

  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

Would you mind providing a link to the live web page to see how it looks in reality?

I really wish there was no slider. I’d like the page to have a long canvas of YouTube reviews — each one individually.

And not a button, but a picture. The visitor clicks on the picture and the video launches.

Do you think this is possible in BSS?

The link to the live web page is the same as above

If you don’t want a slider you don’t have a slider on your page
if you don’t want a button as trigger then don’t have a button as trigger
if you want a picture as trigger add the markup you can see one post above to your picture

Yes it is possible in BSS

1 Like

This might be of help to you…

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.

kuligaposten, thanks a lot :pray:

I’m going to try it. And I’ll pray that the user has javascripts turned on in the browser :wink:

What version of BSS do you have? I have the latest one, but I don’t see that many fields in the attributes:

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

printninja, your “Youtube Video Lazyload 2020” was the first thing I looked at before writing here. That’s a cool idea!

But, unfortunately, I didn’t to add additional video options (start and end time, autoplay, don’t show recommended videos, etc.).

Whatever I specified in the «data-id="___"» field of your custom code — only the video address works :cry:

Thats pretty cool kuligaposten !

1 Like

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

@Bogdan
I understand you think it is difficult, you can download the bsdesign here

@printninja
It is no problem to change your script to have start and end time or any other attributes, it’s almost already there

@twinstream :metal:

1 Like

Dear kuligaposten, unfortunately, the link does not work. I can’t download it :cry:

@kuligaposten I have to agree with @Bogdan’s sad face here. We all know you provide invaluable help to people with problems, and it’s greatly appreciated, but deleting your solutions is not only frustrating to people who show up “late to the party”, it’s filling up the forum with broken links, which is just not cool.

While I realize it should be the BSS devs (@martin) who provide some server space for we who so graciously provide tech support solutions for free, in the interests of both keeping your wonderful solutions and examples available for years to come, as well as keeping the Forum tidy, efficient and functional, I will happily provide you with a folder on my own web-server where you can post all your examples. Then maybe at some point in the future, the BSS devs can setup a similar folder on their server just for examples posted to their forums, and I can send them all your stuff.