I’m trying to show/embed “part” of a YouTube video, and I have it starting at the spot I want, but it does not stop where I specify the end in seconds. You can see my site at fcj.bss.design and I have the fcj.bsdesign link… any tips?
https://tmpsend.com/Q2zUKusz
The URL I’m using is:
https://www.youtube.com/watch?v=KSJ7Kfonn7I?start=300&end=350
(Start at 300sec, end at 350sec)
According to these YouTube links, I thought it should work…
https://youtu.be/h3kctQTdiLQ?si=2TQmnRjoFlUeqlUa
https://youtu.be/QjZkOazbMmo?si=8ukXVJCEZxAURLlT
Update:
Instead of using custom code, use the Responsive Embed component and use the same source:
https://www.youtube.com/embed/KSJ7Kfonn7I?start=300&end=350;feature=oembed&rel=0
This way, you will have the video show in the BSS stage
You will have to use a custom code component as BSS strips out anything after the ? in the video component. Try this:
<div class="ratio ratio-16x9">
<iframe
title="Run from 300 to 350 Seconds"
src="https://www.youtube.com/embed/KSJ7Kfonn7I?start=300&end=350;feature=oembed&rel=0"
></iframe>
</div>
Thanks!..
I was able to get the second method to work with custom code, but not the first… I tried a few different ways (I’m not sure & is all supposed to be in there…??)
P.S.
Is there a way to add a page refresh at the end?.. because if the replay button is pushed it goes right back to zero seconds, so the user would be confused at that point, but if I manuually refresh, it works 2nd time again.
You would need to use the youtube API:
Example here: https://youtube-api.bss.design/
To use create a div with id player on your page where you want the video to appear
Then use the following js:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var videoId = 'KSJ7Kfonn7I'; // Replace with your actual video ID
var startSeconds = 300;
var endSeconds = 310;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '660',
width: 'auto',
videoId: videoId,
playerVars: {
'start': startSeconds,
'end': endSeconds,
'autoplay': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
// event.target.playVideo(); uncomment this for auto play
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
checkPlaybackBounds();
} else if (event.data == YT.PlayerState.ENDED) {
// replayVideo(); do nothing
}
}
function checkPlaybackBounds() {
var currentTime = player.getCurrentTime();
if (currentTime < startSeconds || currentTime > endSeconds) {
player.seekTo(startSeconds);
player.pauseVideo();
}
}
function replayVideo() {
player.loadVideoById({
videoId: videoId,
startSeconds: startSeconds,
endSeconds: endSeconds
});
}
You would need to change the videoId, startSeconds and endSeconds in the JS to suit your needs.
This totally works, thanks so much!
Not sure I’m allowed to ask this with this topic, but I seem to have low quality from YouTube whenever I play the stuff and then I have to change to HD manually… Am I to assume that this is a YouTube thing and there’s nothing I can do about it? I looked through some of the API stuff, and I think other people might be having the same frustrations…
I thought you might be able to set it with the setPlaybackQuality call in the API, but youtube discontinued it in 2019
Ya, thanks… thats unfortunate!
