IFRAME CODE CODE
If attackers successfully inject harmful code into a web page that you embed, it could harm your website too. Iframes can be very useful, but you should be aware of their drawbacks.įirst, make absolutely sure that the site or content you embed is trustworthy and secure. When this CSS is applied, you’ll see the video conforms to the screen width: It sets the iframe to take up the entire space of its parent container. container iframe styling applies to the iframe itself. For videos with different aspect ratios, the value of padding-top should be calculated the same way. This value is calculated from the standard YouTube aspect ratio of 16:9 (i.e., 9 / 16 =. The padding-top property value of 56.25% is important for embedding YouTube videos specifically - it ensures the entire video is visible, no matter the width of the container. container section applies to the that holds the iframe. Lastly, apply the following CSS to the above HTML: This container will resize based on screen width: Now, we’ll enclose our iframe in a container div. When these are set, the iframe will always match these dimensions, regardless of device. Next, we’ll remove the width and height attributes from the HTML. Let’s take our YouTube video example again:įor your own implementation, replace the YouTube URL within the quotes with your own YouTube embed URL. Luckily, making mobile-friendly iframes requires just a bit of CSS knowledge to pull off. But what about mobile pages? With more users viewing websites and videos through smartphones and tablets, it’s important to understand how iframes can adapt to smaller screens.
IFRAME CODE HOW TO
So far, we’ve seen how to implement iframes on desktop websites. With this method, ads can be made interactive, as well as track impressions and clicks. While images and gifs are static elements, a fully embedded HTML document allows for scripting. The map above is the result of this iframe code:Īlso, display advertisements are often created with iframes. Google Maps allows you to copy embed code from any map location and display it on your website: For example, here’s the embed code for a HubSpot YouTube video embedded at the top of this post:Įmbedded maps are another common use of iframes. Websites often use iframes to embed media from external websites. Next, let’s see what this element is capable of.
The embed element can also be used to place media, but iframe is better for this purpose.īecause embed is really only useful for embedding outdated web technologies, you likely won’t need it - iframe is much more common and will almost always do the job. Alternatively, embed is used to embed other types of content, including PDFs, browser plugins, and Flash animations. However, these two elements do slightly different things.Īs mentioned, we use iframe to embed an HTML document onto a page. Like iframe, the embed element is used to embed an external resource in a web page. Sets the width of the iframe (if not specified, the default width is 300 pixels)īefore we continue, you might have heard of another similar HTML5 element called embed. The address of the resource included in the iframe Sets what referrer information should be sent in the request for the iframe Sets lazy loading or eager loading for the iframe Sets the height of the iframe (if not specified, the default height is 150 pixels) Grants or denies permission for the iframe to appear in full-screen mode Indicates what features the iframe is allowed to use (e.g. Here’s an overview of common iframe attributes: Like other HTML elements, iframes can be customized with other attributes. width and height may be set as pixel values, or as percentages of the window, which scales the iframe proportionally to the size of the viewing window. These set the dimensions of the iframe region that displays the embedded file. You’ll also notice that this code snippet contains some extra attributes, width and height. This embedded page exists separately from the parent page in terms of its HTML, CSS, and JavaScript code. This code will embed a web page onto its parent page: In its most basic form, an iframe looks like this in HTML:Ī simple piece of functional iframe HTML code looks like this: This tag requires a src (source) attribute, which specifies the URL of the HTML file to be embedded on the parent page.
0 kommentar(er)
