How To Add Youtube Video With Jquery

TL;DR – Embedding a YouTube video to your website lets you lot add dynamicity to your site without having to worry about format compatibility issues.

Contents

• 1. Why Non HTML video Tag?
• 2. Step past Stride: How to Embed a YouTube Video
• 3. Customizing a YouTube Video in HTML5
• 4. How to Embed a YouTube Video: Useful Tips

Why Non HTML video Tag?

HTML5 has a native <video> tag that allows you to include videos in your webpage by defining a source. Still, in that location's a risk the user's browser won't support the format of your video, and calculation multiple sources might exist a bit of a hassle.

Understanding how to embed a YouTube video in HTML can save you a lot of problem. The fob is using an iframe instead of the <video> tags:

Case

                                          <iframe                        width="400"                        height="300"                        src="https://www.youtube.com/embed/a3ICNMQW7Ok?controls=0">                      </iframe>                                      

The iframe stands for an inline frame and allows you to embed one webpage into another – in this case, a YouTube page. This way, you lot don't demand to worry about whether your file format is supported or not.

Pace by Step: How to Embed a YouTube Video

To embed a video from YouTube, open its page and find the Share button under the video role player:

As you click it, you volition see a few sharing options, including various social media platforms. The very first on the listing is Embed. Click on information technology with your cursor:

YouTube will generate a code for you to utilize automatically. The <iframe> tag will have the URL of the video source, height and weight of the thespian and a few more attributes included:

In our case, the lawmaking looked like this:

<iframe width="560" elevation="315" src="https://www.youtube.com/embed/RuckLtuInNY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

All yous need to do now is click Re-create and paste the code into your HTML folio.

Pros

• Simplistic pattern (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid certificates of completion

Pros

• Easy to navigate
• No technical problems
• Seems to care about its users

Main Features

• Huge multifariousness of courses
• 30-day refund policy
• Free certificates of completion

Pros

• Great user feel
• Offers quality content
• Very transparent with their pricing

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

Customizing a YouTube Video in HTML5

At present that you lot know how to embed a YouTube video in HTML, you should also empathize how to modify the mode it works. By adding some parameters to the end of the URL in the embedding lawmaking, you can affect the behavior of the player. To use a parameter, include a question marker (?) at the finish of the URL, and then add one or multiple parameters along with their values.

The autoplay parameter allows you autoplay YouTube embedded videos on your web page. Adding autoplay=1 to the URL volition make the video showtime playing immediately afterward the chief page and the video loads, while autoplay=0 will not.

Example

                                          <iframe                        width="400"                        height="300"                        src="https://world wide web.youtube.com/embed/a3ICNMQW7Ok?autoplay=ane">                      </iframe>                                      

The loop parameter lets y'all loop the video indefinitely or until the user stops it manually. Using loop=one makes the video start again after it ends, while loop=0 ways information technology volition stop after playing once.

Example

                                          <iframe                        width="400"                        height="300"                        src="https://www.youtube.com/embed/a3ICNMQW7Ok?playlist=a3ICNMQW7Ok&loop=1">                      </iframe>                                      

The playlist parameter specifies if multiple YouTube videos should exist played one after another in consecutive order. This allows you to create a personal playlist on your site.

Instance

                                          <iframe                        width="400"                        superlative="300"                        src="https://www.youtube.com/embed/a3ICNMQW7Ok?playlist=a3ICNMQW7Ok">                      </iframe>                                      

Come across a few more handy parameters you can use in a tabular array below:

Parameter	Definition
color	When ready to white, the already watched part of the video will exist highlighted in white in the progress bar
disablekb	When prepare to 1, the video player will not react to keyboard controls
fs	When set to 0, the fullscreen button volition stay visible
modestbranding	When set to 1, the video role player will not show the YouTube logo

How to Embed a YouTube Video: Useful Tips

• Before copying the code from YouTube, you can choose a specific fourth dimension to start playing the video from instead of the outset. You can besides cull whether to include video controls.
• Don't forget the copyrights – information technology'due south illegal to use the creations of other people to make a turn a profit without their permission.

Source: https://www.bitdegree.org/learn/how-to-embed-a-youtube-video

Posted by: shawspreorke.blogspot.com

Share this post