[Facebook Like Iframe Description
Tilo Chopin
I am using iframe to embed a facebook video. I have changed show_text to "true" to include the description from facebook, and increased the height to around 600px to allow space for it. It works great on larger screens and even shows up when previewing in mobile responsive mode on my laptop, but the description and like/comment/share icons are missing when viewed on my phone. The video is still there but no information. Hoping someone has some ideas about this. Thanks!
This will display the Pinterest embed centered with a width of 345. You can specify a height if you'd like to adjust how much of the pin is vertically shown. See below for determining the correct width and height to use.
A placeholder is shown while loading. If you do not specify a placeholder via the embedPlaceholder prop, a default PlaceholderEmbed placeholder component will be used. You can disable the placeholder with the placeholderDisabled prop.
The default placeholder will size itself according to the width and/or height you specify for the embed. If none are specified, it will fall back to a default size appropriate for the given social media platform. You can pass custom props (such as style) to the default placeholder via placeholderProps to override any default behavior.
By default, the placeholder spinner is a BorderSpinner with a width/height of 10 and 25% transparent black border of 3px. You can specify the placeholderSpinner prop to provide your own custom spinner, and the placeholderSpinnerDisabled prop to remove the placeholder spinner altogether.
Each embed has a slightly different implementation. I've tried my best to standardize the embed experience for each from a developer standpoint so you don't have to think about how it performs the embed.
LinkedIn does not have an embed JS library, unfortunately. So we use a simple iframe with the embed URL from LinkedIn's embed option, which is accessed via the menu next to any given post that has embedding allowed. If a post does not have embedding allowed, this option will not appear.
Pinterest provides you with embed code containing an iframe with the calculated width and height. The embed code is accessed via the menu next to any given pin that has embedding allowed. Use these width and height attributes for your embed.
Unfortunately, unlike Facebook and Instagram, there is no documented or obvious way to manually initialize the embed HTML. If you know how to do this, please open a GitHub issue with the info!
So, in order to initialize the embed HTML, we must load the embed script from TikTok every time we render the TikTok embed. To do this, we use time-based query param cache busting and replace the embed.js script element in the head node. This forces the browser to load the script anew each time, which then performs the embed.
The iframe element (short for inline frame) is probably among the oldest HTML tags and was introduced in 1997 with HTML 4.01 by Microsoft Internet Explorer. Even though all modern browsers support them, many developers write endless articles advising against using them.
Developers mainly use the iframe tag to embed an HTML document within another. You may have crossed paths with it when you had to include a third-party widget (like the famous Facebook like button), a YouTube video, or an advertising section on your website.
What you must keep in mind when thinking about iframes is that they let you embed an independent HTML document with its own browsing context. Thus, it will be isolated from the JavaScript and CSS of the parent.
That is one of the valid purposes to use an iframe: to provide a measure of separation between your application and the iframe content. Nevertheless, as you will see in this guide, the separation is not so perfect.
The other situation when iframes saved my life was when I had to build a WYSIWYG editor for a customer. But the thing with these editors is that you have to find a way to keep the focus and the selection when the user is clicking on all the buttons across the interface.
Because an iframe offers an isolated environment, this means that the focus or the selection is never lost when you are clicking outside of it. By using communication events between the iframe and the parent (more on how to do so later in this article), I managed to design a powerful editor in a snap.
When you are using an iframe, you are mostly dealing with content coming from a third party over which you have no control. Thus, you are increasing the risk of having a potential vulnerability in your application or simply having to deal with a bad user experience (like annoying video autoplay ).
For a situation when the sandbox attribute is configured, and one feature is not working correctly within the resource, it might be because it lacks a specific flag. Make sure you know more about them to debug things quickly.
Also, keep in mind that using an empty sandbox attribute will fully sandbox the iframe. This means that the JavaScript inside the iframe will not be executed, and all the privileges listed above will be restricted (like creating new windows or loading a plugin).
To avoid having your iframes slow down your pages, a good technique is to lazy load them (i.e., loading them only when they are required, like when the user scrolls near them). This can be achieved easily just by adding the loading="lazy" attribute to the tag.
Yes, my friends, there is a solution for this. In this article, Chris Coyier shares a little snippet that hides all the iframes on the page with some CSS, removes it until the window is loaded, and then makes them visible.
Many will even enable you to navigate inside. If your iframe does not contain another webpage but instead contains external content like a video player or an ad, it is essential to add a title to the tag.
Another thing to keep in mind is that when your iframe includes non-readable content (like, for instance, a video game built with JavaScript), you will have to hide its contents from screen reader users using the aria-hidden attribute.
There is a lot to be said about WCAG conformance an iframes. Technique H64: Using the title attribute of the frame and iframe elements ( -TECHS/H64.html) addresses how this applies to WCAG Success Criteria 2.4.1 Bypass Blocks (level A) and 4.1.2 Name, Role, Value (level A). While conformance is more nuanced than a pass/fail, at least acknowledging the challenge and risk of being flagged by automated accessibility testing tools should be in this article.
Hi, thanks for this comprehensive iframe documentation , But frankly , I was looking for an answer to a difficult question , a question that no one online , even the Top Programming websites , could answer it till now ..
This question is , how can we play a video game inside iframe , without the keyup or keydown forcing the whole page to scroll up or down , instead of focusing inside the iframe ?
Thanks for your guide! I tried to use it for error handling if the iFrame could not be loaded, but this does not seem to be possible, since the onerror event never gets triggered. Ans it also seems like (at least for Chrome), they are not going to fix that: =365457
Hello. Great post. I had a question about using iframe and jump links together. I am building a recipe site with a list of links to recipes from different sites. When the links are clicked the recipes are displayed within the iframe window at the top of the same page. I wanted to add jump links so the user to taken to the top of the page where the recipe is being displayed. Any suggestions?
I am planning to embed a third party survey url as a source to my modal window iframe. I want the user to take that survey only once and want to prevent view source or inspect element to show up the src somehow. Or at least want to make it obscure and unreadable. I tried setting it via JavaScript and I obfuscated the js setting this src but still after load of the iframe, src is viewable in plain text which earlier was set to unknown. Any help in securing the survey link?
@Nada Rifki
Is there any way to get the text from click inside iframe.
Explaination: I have an iframe on my page using window.getSelection() i get the selected text, similarly i want to get the selected text from iframe.
Can we do that? if yes how?
Many sites use third-party embeds to create an engaging user experience by delegating some sections of a web page to another content provider. The most common examples of third-party content embeds are video players, social-media feeds, maps, and advertisements.
Third-party content can impact the performance of a page in many ways. It can be render-blocking, contend with other critical resources for network and bandwidth, or affect the Core Web Vitals metrics. Third-party embeds may also cause layout shifts as they load. This article discusses performance best practices that you can use when loading third-party embeds, efficient loading techniques, and the Layout Shift Terminator tool that helps reduce layout shifts for popular embeds.
Embeds are frequently used in the following:* Websites related to sports, news, entertainment, and fashion use videos to augment textual content.* Organizations with active Twitter or social media accounts embed feeds from these accounts to their web pages to engage and reach out to more people.* Restaurant, park, and event venue pages often embed maps.
Third-party embeds are typically loaded in elements on the page. Third-party providers offer HTML snippets often consisting of an that pulls in a page composed of markup, scripts, and stylesheets. Some providers also use a script snippet that dynamically injects an to pull other content in. This can make the third-party embeds heavy and affect the performance of the page by delaying its first-party content.
Many popular embeds include over 100 KB of JavaScript, sometimes even going up to 2 MB. They take more time to load and keep the main thread busy when executing. Performance monitoring tools such as Lighthouse and Chrome DevTools help to measure the impact of third-party embeds on performance.
795a8134c1