But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div. And Yes, even in 2021 YouTube doesn’t offer a way to automatically resize and scale their embeds, why don’t we take a look how we can fix this with Tailwind. This is far from ideal for responsive websites. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. YouTube uses iFrames for their embeds and these iFrames need a fixed width and height specified. You can easily resize iFrames using HTML and/or CSS, and even make them resizable so they'll adjust automatically based on the user's screen size. How this works: The container element is given a zero height and a percentage bottom padding. iFrames let you embed external content, such as YouTube videos, advertisements, and content from other sites into your own web page. What you need to do is wrap it in a container like so (note the class names and removal of the width and height): It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. You can use this id, and refer to your video in the HTML code.
#IFRAME YOUTUBE CODE#
Here is what a typical YouTube embed code looks like, with fixed width and height: YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.
You can also use this technique with most other iframe-based embeds, such as slideshows.
If (event.data = YT.PlayerState.The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. the player should play for six seconds and then stop. The function indicates that when playing a video (state=1), The API calls this function when the player's state changes. You should use the embed endpoint, so the URL now should be something like. The API will call this function when the video player is ready. The YouTube URL in src must have and use the embed endpoint instead of watch, so for instance let’s say you want to embed this YouTube video: (browser's URL). This function creates an (and YouTube player) If youre publishing a video from YouTube, Vimeo or another.
Var firstScriptTag = document.getElementsByTagName('script') į(tag, firstScriptTag) Remember to add a title attribute if youre embedding your video using an