This will generate an iframe code with prefilled attributes that you can adjust to your preference: Right-click on any Youtube video of your choice and select the copy embed code option: The easiest way to embed a Youtube video to your webpage is by using the auto-generated Youtube embed link. The iframe/video will now take 100% of the parent container's height and width, this will make it easy when dealing with the responsiveness. We can also set the width and height of the iframe tag like this: īut it is recommended to always wrap the iframe with a parent container like this: The result of the snippet above is shown below: Now that we have the video URL, we can create a new iframe tag and paste the embed link in the src attribute in our HTML file as shown below. Youtube also has a special link for embedding videos, which looks like this: https: //Our Youtube video example looks like this: 25E 6FPy 9SPc The Youtube video id we are interested in is 25E6FPy9SPc, and that is the only thing we need to retrieve from Youtube. This method is handy when you have an array of Youtube videos id and you need to display them on the UI using JavaScript.
This will generate the youtube link below: 25E 6FPy 9SPc Or, right-click on the Youtube video you want to embed and click the copy video URL option as shown below: You can get the id of any Youtube video from the browser URL bar like this: The two methods we will be exploring are:Įvery video on Youtube has a unique id, we only require the id of the video we want to embed into our website. Without any further ado, let's get started You can learn more about the iframe tag from W3schools The title attribute is important for screen readers and it is a good practice to include a title in your iframe tags. The iframe src attribute takes the link of the external resource you want to embed. The iframe tag is used to display a webpage or document within another webpage. In this article, I will be making use of the HTML iframe tag, here's the syntax:
W3school iframe how to#
You can see the above code in action at my postMessage demo, which is part of a new testing ground on my web site, HTML5 – Information and samples for HTML5 and related APIs which displays various HTML5 examples, the code to run them and web browser compatibility.Have you ever wondered how youtube videos are been embedded into a webpage? Worry no more! This article contains two different methods with a step-by-step guide on how to embed any Youtube video into your webpage using HTML and CSS only. The nice thing is that this is supported in: Window.attachEvent("onmessage", displayMessage) Window.addEventListener("message", displayMessage, false) Message = "I got " + evt.data + " from " + evt.origin ĭocument.getElementById("received-message").innerHTML = message IframeWin.postMessage(myMessage.value, "") MyMessage = document.getElementById("my-message") Var iframeWin = document.getElementById("da-iframe").contentWindow,įorm = document.getElementById("the-form"), In this example we will have one containing page with a form, posting a message to an iframe in that page.
In the receiving window, just add an event listener for the message event.Call the postMessage method of the window/iframe element you want to send the information to.What makes it cool, and very easy to use, is that all you need to trigger it is to call a method and add an event handler: The solution is called postMessage and is part of the HTML5 Web Messaging specification.
W3school iframe windows#
PostMessage in HTML5 to send messages between windows and iframes Published on Thursday, March 18, 2010Įver had the need to communicate between windows or the current window and an inner iframe? Across domains as well? I bet you have, but now we have a nice option for doing that!
0 kommentar(er)
