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
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:
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_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.