Embedding a certain section for a YouTube video
You just found the perfect YouTube video to post on your website or blog.
You get the embed code and then realize there are two and a half minutes of bullshit at the end that you don’t want your website visitors to have to watch.
Or maybe there is a five-minute intro where some asshole in a backwards hat introduces himself and begs you to subscribe to his channel.
Either way, there is a section (or multiple sections) you don’t want your website visitors to have to watch; so what do you do now?
YouTube’s standard embed features don’t offer a way to only embed a certain time period of a video, but that doesn’t mean it isn’t possible.
The basics of YouTube embedding
If you are looking for something as advanced as embedding certain parts of a YouTube video, you probably know how to use YouTube’s basic embed features, but I’ll start it with you anyways.
<iframe src="http://www.youtube.com/embed/YourVideoID" width="500" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe> Simple enough.
Now, while looking for a solution to this problem not to long ago, I had some issues finding answers. I was not at all familiar with YouTube’s Javascript API, but I knew that would be the answer.
I came across a post that gave me just about everything I need.
Embedding a YouTube video with a specific start time
For the following examples, you will ened to replace “YourVideoID” with the ID of the YouTube video you are looking to embed. It will be something like this: “F1B9Fk_SgI0”.
<div id="youtube-player"
data-video="YourVideoID"
data-startseconds="30"
data-height="480"
data-width="640">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-player");
var player = new YT.Player('youtube-player', {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
events: {
'onReady': function(e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
</script>
You’ll see data-startseconds="30". You need to add in the number of seconds in which you would like the video to start playing. So, in this case, the video will start at 30 seconds.
Embedding a YouTube video with a specific end time
<div id="youtube-player"
data-video="YourVideoID"
data-endseconds="130"
data-height="480"
data-width="640">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-player");
var player = new YT.Player('youtube-player', {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
events: {
'onReady': function(e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
</script>
Where it says data-endseconds="130", you will replace “130” with the number of seconds in wich you want the video to end.
Embedding a YouTube video with a specific start AND end time
<div id="youtube-player"
data-video="YourVideoID"
data-endseconds="20"
data-endseconds="90"
data-height="480"
data-width="640">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-player");
var player = new YT.Player('youtube-player', {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
events: {
'onReady': function(e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
</script>
You’ll see we have added both data-startseconds="20" AND data-endseconds="90", so this video will start 20 seconds in and end at after 90 seconds.
Remove realted posts from the end of your YouTube video
Typically, removing related posts from the end of the video as super easy. When copying the embed code from YouTube, you can simply deselect “Show recommended videos”.
If we want our embeded video to use certain start and/or end times, we’ll need to add in another line of code.
<div id="youtube-player"
data-video="YourVideoID"
data-endseconds="20"
data-endseconds="90"
data-height="480"
data-width="640">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
function onYouTubeIframeAPIReady() {
var ctrlq = document.getElementById("youtube-player");
var player = new YT.Player('youtube-player', {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
playerVars: {'rel': 0},
events: {
'onReady': function(e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
</script>
All you need to do is add playerVars: {'rel': 0}, underneath the width line in the javascript. That’s it!
