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

the number after start is in seconds

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')
    var start = v.getAttribute('data-bs-start')
    var end = v.getAttribute('data-bs-end')
    var videoSrc = v.getAttribute('data-bs-video')
    var playThis = '' + videoSrc + '?autoplay=1&start='+start+'&end='+end+'&controls=0&playlist=0&loop=1&rel=0'
    video.src = playThis
    var length = (end - start) * 1000
    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

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?

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…
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

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

Friends, save me!

YouTube changed something, and now our code doesn’t work :frowning:
Now visitors go to my site and see “This video is unavailable”.

What to do now?

@kuligaposten, if you click on any of the videos in your example above, you’ll understand my misfortune: YouTube Player

Link to your website?

Thank you for your concern. @kuligaposten got it all figured out. Turns out YouTube changed the code for specifying playlists all of a sudden.