How to Embed a Portion of a YouTube Video in Website?

Adding multimedia files in web pages makes it dynamic and catches the eye of the viewer. One can easily add YouTube videos by simply inserting the embedded code in the HTML file of the web pages. But what if the video is too long and is worth watching only in small chunks!!

This tutorial will help you in knowing how to embed a portion of a YouTube video in the website. There are two ways in doing so and both of them have been illustrated below.

Embedding YouTube Videos Using Start Time:

This technique of embedding YouTube videos involve specifying the start time for the embedded video and allowing it to play till the end. It is an easy technique in which you have to use the standard embedded code of the video you wish to add, in your web page.

But to include only a portion of the video, you need to edit the embedded code a bit. Use the following code and replace the ‘video id’ with yours: url

You can get the video id from the YouTube link or the embedded code of your video. Relace the start time with yours. Ensure that you enter values in seconds only. E.g. Replace 5234s with 2345s. So if you want your start time of the video embedded in your web page be 3:28, then enter 208s (60*3+28).

Embedding YouTube Videos Using Start Time & End Time:

This technique for embedding a portion of YouTube videos in web pages is a bit complicated because of the end time parameter. The standard YouTube embedded code does not support the end time parameter.

So inorder to implement it in the embedded code for the YouTube video, you need to make use of YouTube JavaScript API. For simplicity of your understanding, use the following code snippet as the sample:

embed-latest-youtube-videoReplace the start time and end time of the portion of the YouTube video you wish to add. Ensure that all the units are in seconds. If you wish you can set the video frame as well by adjusting the height and width inside the <div>.

Swasti Pujari
Swasti Pujari

Swasti Pujari is a versatile Engineer, blogger, content writer, and Social Media Enthusiast. With a passion for technology and creativity, she has devoted her career to solving engineering challenges and crafting engaging content. Her online presence is a strategic platform for connecting with people and sharing insights. Swasti's unique blend of technical expertise and creative expression has made her a key figure in her field. Her mantra for success is continuous learning and happiness in her work, reflecting her innovative approach to both engineering and writing.

Leave a Reply