More on iframe tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
This is the next lesson right after the one with native HTML video tag and the reason for that is that when I was making websites for real clients and companies, in most cases all the videos on the page actually was served from YouTube. There are quite a lot of reasons to do that but there are two most common:
- doing so, company is engaging user with its YouTube content and there are chances that user will go to companies channel and check out some other videos
- and the second: almost all users of the internet are watching YouTube and are used to it's controls and principles of working.
In general, iframe tag purpose is to insert one webpage to another. Yes, the whole page???? There are a lot of technical details on how to do that and why.
And it really depends on what you are inserting on your webpage with an iframe tag and what you want to achieve.
But in this lesson we will concentrate only on how to insert YouTube video on a page using iframe.
It is really simple. Let's dive into the code.
All we have to do really to use iframe for YouTube video on the page is to write iframe and define the scr attribute with a specific path.
It consists of "https://www.youtube.com/embed/"
part and the id of the video. It is located here and looks like a random generated string.
And that's it - you have YouTube video on your webpage!
To add proper styling to it lets add a class to our stylesheet.
Now our YouTube video will be responsive for any page width and will take the width of the parent html element. In our case this is the whole page.