Categories: InternetSocial Media

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:

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:

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

Share
Published by
Swasti Pujari

Recent Posts

Top 10 Sitcoms of the 2010s That You Need to Watch

Everyone loves binging a good old sitcom from time to time. The usual favourites such…

5 months ago

Top 15 Classics for Kids That Will Keep Your Child Occupied

According to recent psychological studies, indulging in too much screentime has resulted in decreased attention…

5 months ago

Top 15 Feel Good Movies To Free Your Mind of Stress

Feel good movies have the power to lift your mood no matter how sad you…

5 months ago

How to Conduct an SEO Audit for Your Joomla Website

Greetings, digital navigators! 🌐 Embarking on the journey of building a website with Joomla? Kudos!…

6 months ago

Top 10 Movies Like Hera Pheri That Are Simply Hilarious

Movies like Hera Pheri are not that hard to find. Hera Pheri is no doubt…

6 months ago

Top 15 Mythological Movies That Are Far Better Than Adipurush

Mythological movies are comforting to watch because they remind us of the stories that our…

7 months ago