Remove in-content iframes
Note: This project is finished!
Each of the documents listed below has at least one in-place use of the
<iframe> element within it. In order to improve performance and allow us to more easily revise and correct layout in the future, we need to quickly update all of these pages to use macros instead. This is somewhat urgent, as there is work that needs to be done by our development team that cannot begin until all of these are fixed. That's where you come in!
These are pretty easy to fix; there are three known use cases for
<iframe>, and each one has a macro, as follows:
- YouTube video: These should be replaced with the
EmbedYouTubemacro. This takes one or two parameters. The first is the ID of the video to play; the second is the aspect ratio to use (either “4:3” or “16:9”; the latter is the default if you don’t specify one). For a video whose URL is https://www.youtube.com/embed/G4FnzvLr_ak, the ID is “G4FnzvLr_ak”.
- Live sample: These should already be using
EmbedLiveSampleor one of its derivatives that are particular to a given area of MDN (the Firefox OS building blocks area, for instance). See Using the live sample system for details.
- JSFiddle embed: We don’t really encourage these yet since we’re still finalizing our plans for how to work with JSFiddle; however, if you see any places that do embed JSFiddle, they need to be updated to use the
JSFiddleEmbedmacro. The first parameter is the URL of the fiddle (without "embed/" at the end, which is common mistake). The second will be used to specify which tabs the fiddle should display; this is a string that can be empty ("") or any combination of "js", "css", "html", and "redirect". The third parameter indicates the height, in pixels, to make the fiddle box. Its width will always span the whole width of its container (usually the page).
Making these changes will require going into source mode in the editor; see Using source mode in the MDN editor for details on how to do this safely.
When you’re done checking (and updating, if necessary) each page, strike it through with
on the list.
Note: It's possible that there are false positives in this list; don't panic if you look through the source for a page and don't see any
Thanks so much for your help!
Update: We finished a first pass through the list, but a few pages had multiple
<iframe>s and occasionally people missed some. So here's an updated list! Let's take 'em out!