Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

How to create an iframe for a youtube video?


Asked by Philip Schmidt on Dec 05, 2021 FAQ



Use a container element, like <div>, and add the iframe inside of it: Add a percentage value for padding-top to maintain the aspect ratio of the container DIV. The following example will create an aspect ratio of 16:9, which is the default aspect ratio of YouTube videos.
In respect to this,
Go to any Youtube video and click SHARE. In the Share options, click EMBED and it generates the iFrame code to copy/paste on your site. "Do all YouTube videos have a version in an embed/ directory that I could pull and show?"
Just so, As you can see on the sample embedded iframe YouTube video below, it is now proportionally responsive. The video and iframe is now synchronize in terms of responsiveness. If you want to test it, resize your browser’s window or use a mobile device.
Keeping this in consideration,
This is done by accessing the embedable player/code by using an iFrame. Go to any Youtube video and click SHARE. In the Share options, click EMBED and it generates the iFrame code to copy/paste on your site.
Also,
By default, if you are going to embed an iframe videos from a video hosting site like YouTube, you will see that it is not responsive enough to adapt on screen sizes because its height stays the same. But worry no more on the responsiveness of your embedded iframe videos using a simple CSS techniques we have written on this article.