How To Embed YouTube video in HTML without Iframe By Using the <object> Element
Using the <object> element in HTML allows you to integrate various media, including YouTube videos, onto your webpage. How to embed youtube video in HTML without iframe step-by-step guide to do it:
Step 1: Get the Video URL
At first, you will need to locate the YouTube video that you wish to embed. Click on the Share button below the video, then click on Embed. You’ll see an iframe code snippet. Within this snippet, find the src attribute. The value of this attribute is the URL you need.
Step 2: Use the <object> Element to Embed YouTube Video in HTML Without Iframe
Next, you’ll use the <object> element in your HTML code. The<object> tag requires two attributes: data and type. The data the attribute should be set to the URL you obtained in Step 1, and the type attribute should be set to “text/html”.
Here’s an example of <object> Element:
<object
data="https://www.youtube.com/embed/dQw4w9WgXcQ"
type="text/html"
width="640"
height="360">
</object>
Change the URL in the data attribute in the code above to the URL of the YouTube movie you want to watch. The properties for width and height can be changed to fit the size of your page.
Step 3: Add the Element (Optional)
You can add more options to the <object> element using the <param> element. For example, you can use it to turn on fullscreen mode:
<object
data="https://www.youtube.com/embed/dQw4w9WgXcQ"
type="text/html"
width="640"
height="360">
<param name="allowfullscreen" value="true">
</object>
In this example, the <param> element with the name attribute set to “allowfullscreen” and the value attribute set to “true” enables fullscreen mode for the embedded video.
Embed YouTube Video in HTML Without Iframe By Using the YouTube Data API
Embedding a YouTube video directly into your HTML code without using an iframe can be achieved using the YouTube Data API. This method involves fetching the video data from YouTube and then using a video player like HTML5’s <video> tag to play it.
Step 1: Get the Video ID
The first step is to get the YouTube video ID. This is the unique identifier that YouTube uses for each video. It’s usually found in the video’s URL after “watch?v=”.
For example, in the URL https://www.youtube.com/watch?v=dQw4w9WgXcQ, the video ID is dQw4w9WgXcQ.
For example, in the URL https://www.youtube.com/watch?v=dQw4w9WgXcQ, the video ID is dQw4w9WgXcQ.
Step 2: Fetch Video Data from YouTube
Next, you’ll need to fetch the video data from YouTube. This can be done using the YouTube Data API. You’ll need to sign up for a free API key and then use that key to make a GET request to the following URL:
https://www.googleapis.com/youtube/v3/videos?id=VIDEO_ID&key=YOUR_API_KEY&part=snippet,contentDetails,statistics,status
Replace VIDEO_ID with your video’s ID and YOUR_API_KEY with your API key. The response will include a direct link to the video file.
How do I get a YouTube API key to Embed YouTube Video in HTML without Iframe?
To get a YouTube API key, you need to follow these steps:
Log in to Google Developers Console with your Google account.
Create a new project and select YouTube Data API v3 as one of the services that your application is registered to use.
Access the API and generate a password. The API key will be displayed on a screen. Put a copy aside in a secure location.
Step 3: Embed Video Using HTML5 Video Tag
Finally, the HTML5 <video> tag allows you to directly include the video into your HTML code. In this case, we have:
<video width="320" height="240" controls>
<source src="VIDEO_URL" type="video/mp4">
Your browser does not support the video tag.
</video>
Replace VIDEO_URL with the direct link to the video file you got from the YouTube Data API.
That’s all there is to it! You were able to embed youtube video in Html without iframe. Please keep in mind that this way takes a little more work than using an iframe alone, but it gives you more control over how the video plays and looks.
When you embed videos, remember to always follow YouTube’s rules. It is against YouTube’s rules to download, change, or share protected content without permission, and if you do, your API access could be taken away. Before you embed a movie in this way, you should always make sure you have the right permissions.
I hope this helps! Let me know if you have any questions on EduSeekho. 😊
