README.md 35.8 KB
Newer Older
 Peter Dave Hello committed Oct 21, 2014 1 # reveal.js [![Build Status](https://travis-ci.org/hakimel/reveal.js.svg?branch=master)](https://travis-ci.org/hakimel/reveal.js)  Hakim El Hattab committed Jan 21, 2013 2   Hakim El Hattab committed Aug 07, 2012 3 A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).  Hakim El Hattab committed Dec 26, 2011 4   Hakim El Hattab committed Aug 07, 2012 5 reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.  Hakim El Hattab committed Dec 04, 2011 6 7   Hakim El Hattab committed May 12, 2013 8 #### More reading:  Hakim El Hattab committed May 04, 2013 9 - [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.  Hakim El Hattab committed Jul 02, 2013 10 - [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history.  Hakim El Hattab committed Aug 07, 2012 11 - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!  Hansi committed Oct 12, 2012 12 - [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.  Hakim El Hattab committed Aug 07, 2012 13   Hakim El Hattab committed Oct 22, 2013 14 ## Online Editor  Hakim El Hattab committed Sep 04, 2012 15   Hakim El Hattab committed May 04, 2013 16 Presentations are written using HTML or markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [http://slid.es](http://slid.es).  Hakim El Hattab committed Sep 04, 2012 17 18   Hakim El Hattab committed Aug 07, 2012 19 ## Instructions  Hakim El Hattab committed Jan 14, 2012 20   Hakim El Hattab committed Apr 04, 2012 21 ### Markup  Hakim El Hattab committed Jan 14, 2012 22   danse committed Apr 24, 2013 23 Markup hierarchy needs to be 
 where the 
 represents one slide and can be repeated indefinitely. If you place multiple 
's inside of another 
 they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and it will be included in the horizontal sequence. For example:  Hakim El Hattab committed Apr 04, 2012 24   Hakim El Hattab committed Jun 06, 2012 25 html  26 
 hakimel committed Jan 21, 2013 27 
 Hakim El Hattab committed Apr 04, 2012 28 29 30 31 32 33 34 35 36 
Single Horizontal Slide
Vertical Slide 1
Vertical Slide 2
  Hakim El Hattab committed Jul 31, 2012 37 38 ### Markdown  Hakim El Hattab committed Oct 08, 2012 39 It's possible to write your slides using Markdown. To enable Markdown, add the data-markdown attribute to your 
 elements and wrap the contents in a   Hakim El Hattab committed Jul 31, 2012 50 51 52 
  Hakim El Hattab committed Feb 27, 2013 53 54 #### External Markdown  Hakim El Hattab committed Jul 24, 2013 55 You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file. The data-charset attribute is optional and specifies which charset to use when loading the external file.  Hakim El Hattab committed Feb 27, 2013 56   57 58 When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup).  Hakim El Hattab committed Feb 27, 2013 59 html  60 61 62 63 64 65 
 Hakim El Hattab committed Feb 27, 2013 66 67   Hakim El Hattab committed Oct 28, 2013 68 69 #### Element Attributes  VonC committed Nov 30, 2013 70 Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.  Hakim El Hattab committed Oct 28, 2013 71 72 73 74  html
  Hakim El Hattab committed Nov 25, 2013 81 #### Slide Attributes  Hakim El Hattab committed Nov 06, 2013 82   VonC committed Nov 30, 2013 83 Special syntax (in html comment) is available for adding attributes to the slide 
elements generated by your Markdown.  Hakim El Hattab committed Nov 06, 2013 84 85 86 87  html
  Hakim El Hattab committed Oct 28, 2013 94   Hakim El Hattab committed Apr 04, 2012 95 96 ### Configuration  Hakim El Hattab committed Aug 07, 2012 97 At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below.  Hakim El Hattab committed Jan 14, 2012 98   Hakim El Hattab committed Jun 06, 2012 99 javascript  Hakim El Hattab committed Jan 14, 2012 100 Reveal.initialize({  Hakim El Hattab committed Jan 31, 2013 101   Hakim El Hattab committed Apr 04, 2012 102  // Display controls in the bottom right corner  Hakim El Hattab committed Jan 14, 2012 103 104 105 106 107  controls: true, // Display a presentation progress bar progress: true,  108 109 110  // Display the page number of the current slide slideNumber: false,  111 112  // Push each slide change to the browser history history: false,  Hakim El Hattab committed Jan 14, 2012 113   Hakim El Hattab committed Jul 20, 2012 114 115 116  // Enable keyboard shortcuts for navigation keyboard: true,  Hakim El Hattab committed Sep 21, 2012 117 118 119  // Enable the slide overview mode overview: true,  Hakim El Hattab committed Nov 10, 2012 120  // Vertical centering of slides  121  center: true,  Hakim El Hattab committed Nov 10, 2012 122   Ting-Yu Lin committed Oct 17, 2013 123 124 125  // Enables touch navigation on devices with touch input touch: true,  126  // Loop the presentation  Hakim El Hattab committed Apr 28, 2012 127 128  loop: false,  Hakim El Hattab committed Nov 27, 2012 129 130 131  // Change the presentation direction to be RTL rtl: false,  Ting-Yu Lin committed Oct 17, 2013 132 133 134 135 136 137 138  // Turns fragments on and off globally fragments: true, // Flags if the presentation is running in an embedded mode, // i.e. contained within a limited portion of the screen embedded: false,  Hakim El Hattab committed Mar 17, 2013 139  // Number of milliseconds between automatically proceeding to the  ageier committed Oct 11, 2012 140  // next slide, disabled when set to 0, this value can be overwritten  Hakim El Hattab committed Oct 13, 2012 141  // by using a data-autoslide attribute on your slides  142 143  autoSlide: 0,  144 145 146  // Stop auto-sliding after user input autoSlideStoppable: true,  147  // Enable slide navigation via mouse wheel  148  mouseWheel: false,  Hakim El Hattab committed Jan 14, 2012 149   Ting-Yu Lin committed Oct 17, 2013 150 151 152 153 154 155  // Hides the address bar on mobile devices hideAddressBar: true, // Opens links in an iframe preview overlay previewLinks: false,  Hakim El Hattab committed Jan 14, 2012 156  // Transition style  Hakim El Hattab committed Apr 06, 2013 157 158 159 160  transition: 'default', // default/cube/page/concave/zoom/linear/fade/none // Transition speed transitionSpeed: 'default', // default/fast/slow  Hakim El Hattab committed Jan 31, 2013 161   Ting-Yu Lin committed Oct 17, 2013 162  // Transition style for full page slide backgrounds  Hakim El Hattab committed Nov 04, 2013 163  backgroundTransition: 'default', // default/none/slide/concave/convex/zoom  Ting-Yu Lin committed Oct 17, 2013 164 165  // Number of slides away from the current that are visible  Hakim El Hattab committed Oct 22, 2013 166  viewDistance: 3,  167   Michał Smoliński committed Sep 10, 2013 168  // Parallax background image  Hakim El Hattab committed Sep 15, 2013 169  parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"  170   Michał Smoliński committed Sep 10, 2013 171  // Parallax background size  Hakim El Hattab committed Oct 22, 2013 172  parallaxBackgroundSize: '' // CSS syntax, e.g. "2100px 900px"  Michał Smoliński committed Sep 10, 2013 173   Hakim El Hattab committed Jun 04, 2013 174   Hakim El Hattab committed Jan 14, 2012 175 176 177 });   Dan Dascalescu committed Nov 13, 2012 178 179 Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (cube and page). To restore the previous behavior, set center to false.  Hakim El Hattab committed Mar 30, 2013 180   wtw committed Mar 15, 2013 181 The configuration can be updated after initialization using the configure method:  Hakim El Hattab committed Mar 04, 2013 182 183 184 185 186 187 188 189 190  javascript // Turn autoSlide off Reveal.configure({ autoSlide: 0 }); // Start auto-sliding every 5s Reveal.configure({ autoSlide: 5000 });   Hakim El Hattab committed Feb 03, 2013 191   Hakim El Hattab committed Aug 11, 2012 192 193 194 195 196 197 198 ### Dependencies Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example: javascript Reveal.initialize({ dependencies: [  Hakim El Hattab committed Aug 14, 2012 199  // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/  Hakim El Hattab committed Oct 28, 2012 200  { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },  hakimel committed Jan 21, 2013 201   Hakim El Hattab committed Aug 14, 2012 202  // Interpret Markdown in
elements  Amit Kotlovski committed May 01, 2013 203  { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },  Hakim El Hattab committed Oct 28, 2012 204  { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },  hakimel committed Jan 21, 2013 205   Hakim El Hattab committed Oct 28, 2012 206 207  // Syntax highlight for elements { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },  hakimel committed Jan 21, 2013 208   Dan Dascalescu committed Oct 14, 2012 209  // Zoom in and out with Alt+click  210  { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },  Hakim El Hattab committed Nov 11, 2012 211   212  // Speaker notes  Hakim El Hattab committed Nov 11, 2012 213 214 215  { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }, // Remote control your reveal.js presentation using a touch device  Hakim El Hattab committed Aug 18, 2013 216 217 218 219  { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }, // MathJax { src: 'plugin/math/math.js', async: true }  Hakim El Hattab committed Aug 11, 2012 220 221 222 223 224 225 226 227 228 229 230  ] });  You can add your own extensions using the same syntax. The following properties are available for each dependency object: - **src**: Path to the script to load - **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false - **callback**: [optional] Function to execute when the script has loaded - **condition**: [optional] Function which must return true for the script to be loaded  Hakim El Hattab committed Jun 18, 2013 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 ### Presentation Size All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport. See below for a list of configuration options related to sizing, including default values: javascript Reveal.initialize({ ... // The "normal" size of the presentation, aspect ratio will be preserved // when the presentation is scaled to fit different resolutions. Can be // specified using percentage units. width: 960, height: 700, // Factor of the display size that should remain empty around the content margin: 0.1, // Bounds for smallest/largest possible scale to apply to content minScale: 0.2, maxScale: 1.0 });   Hakim El Hattab committed Oct 13, 2013 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278  ### Auto-sliding Presentations can be configure to progress through slides automatically, without any user input. To enable this you will need to tell the framework how many milliseconds it should wait between slides: javascript // Slide every five seconds Reveal.configure({ autoSlide: 5000 });  When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Sliding is also paused automatically as soon as the user starts navigating. You can disable these controls by specifying autoSlideStoppable: false in your reveal.js config. You can also override the slide duration for individual slides by using the data-autoslide attribute on individual sections: html
This will remain on screen for 10 seconds
  Hakim El Hattab committed Jun 18, 2013 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 ### Keyboard Bindings If you're unhappy with any of the default keyboard bindings you can override them using the keyboard config option: javascript Reveal.configure({ keyboard: { 13: 'next', // go to the next slide when the ENTER key is pressed 27: function() {}, // do something custom when ESC is pressed 32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding) } });   Hakim El Hattab committed Apr 04, 2012 294 295 ### API  Hakim El Hattab committed Jun 18, 2013 296 The Reveal class provides a JavaScript API for controlling navigation and reading state:  Hakim El Hattab committed Apr 04, 2012 297   Hakim El Hattab committed Jul 20, 2012 298 javascript  299 // Navigation  Federico Fissore committed Nov 05, 2012 300 Reveal.slide( indexh, indexv, indexf );  301 302 303 304 305 306 Reveal.left(); Reveal.right(); Reveal.up(); Reveal.down(); Reveal.prev(); Reveal.next();  Michael Kühnel committed Oct 23, 2012 307 308 Reveal.prevFragment(); Reveal.nextFragment();  Hakim El Hattab committed Jul 20, 2012 309 Reveal.toggleOverview();  Hakim El Hattab committed Jun 18, 2013 310 Reveal.togglePause();  311 312 313 314 315 316  // Retrieves the previous and current slide elements Reveal.getPreviousSlide(); Reveal.getCurrentSlide(); Reveal.getIndices(); // { h: 0, v: 0 } }  Hakim El Hattab committed Jun 18, 2013 317 318 319 320 321 322  // State checks Reveal.isFirstSlide(); Reveal.isLastSlide(); Reveal.isOverview(); Reveal.isPaused();  Hakim El Hattab committed Jul 20, 2012 323   Hakim El Hattab committed Apr 04, 2012 324   Hakim El Hattab committed Jun 18, 2013 325 ### Ready Event  Hakim El Hattab committed Oct 17, 2012 326 327 328 329 330 331 332 333 334  The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating. javascript Reveal.addEventListener( 'ready', function( event ) { // event.currentSlide, event.indexh, event.indexv } );   Hakim El Hattab committed Jun 18, 2013 335 ### Slide Changed Event  336   337 An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.  338   Hakim El Hattab committed Nov 11, 2012 339 340 Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.  Hakim El Hattab committed Jun 06, 2012 341 javascript  342 Reveal.addEventListener( 'slidechanged', function( event ) {  343  // event.previousSlide, event.currentSlide, event.indexh, event.indexv  344 345 346 } );   Hakim El Hattab committed Jun 18, 2013 347 348 349 350 351 352 353 354 355 356 357 358 359 360  ### States If you set data-state="somestate" on a slide 
, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. Furthermore you can also listen to these changes in state via JavaScript: javascript Reveal.addEventListener( 'somestate', function() { // TODO: Sprinkle magic }, false );  ### Slide Backgrounds  Hakim El Hattab committed Jun 04, 2013 361   Hakim El Hattab committed Jun 18, 2013 362 Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a data-background attribute to your 
 elements. Below are a few examples.  Hakim El Hattab committed Jun 04, 2013 363 364 365 366 367 368 369 370 371 372 373 374 375  html

All CSS color formats are supported, like rgba() or hsl().

This slide will have a full-size background image.

This background image will be sized to 100px and repeated.

  Hakim El Hattab committed Jun 18, 2013 376 Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing backgroundTransition: 'slide' to the Reveal.initialize() call. Alternatively you can set data-background-transition on any section with a background to override that specific transition.  Hakim El Hattab committed Jun 04, 2013 377   VonC committed Nov 04, 2013 378   Michał Smoliński committed Sep 10, 2013 379 380 ### Parallax Background  Hakim El Hattab committed Sep 15, 2013 381 If you want to use a parallax scrolling background, set the two following config properties when initializing reveal.js (the third one is optional).  Michał Smoliński committed Sep 10, 2013 382 383 384  javascript Reveal.initialize({  385   Michał Smoliński committed Sep 10, 2013 386  // Parallax background image  Hakim El Hattab committed Sep 15, 2013 387  parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"  388   Michał Smoliński committed Sep 10, 2013 389  // Parallax background size  Hakim El Hattab committed Sep 15, 2013 390  parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)  391   Michał Smoliński committed Sep 10, 2013 392 393 394 395 396 397  // This slide transition gives best results: transition: linear });   Hakim El Hattab committed Nov 27, 2013 398 Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://lab.hakim.se/reveal-js/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px).  Michał Smoliński committed Sep 10, 2013 399 400   Hakim El Hattab committed Jun 04, 2013 401   Hakim El Hattab committed Jun 18, 2013 402 403 ### Slide Transitions The global presentation transition is set using the transition config value. You can override the global transition for a specific slide by using the data-transition attribute:  Hakim El Hattab committed Jun 18, 2013 404   Hakim El Hattab committed Jun 18, 2013 405 406 407 408 html

This slide will override the presentation transition and zoom!

 Hakim El Hattab committed Jun 18, 2013 409   Hakim El Hattab committed Jun 18, 2013 410 411 412 

Choose from three transition speeds: default, fast or slow!

 Hakim El Hattab committed Jun 18, 2013 413 414   Hakim El Hattab committed Jun 18, 2013 415 416 Note that this does not work with the page and cube transitions.  Hakim El Hattab committed Jun 18, 2013 417   Hakim El Hattab committed Oct 20, 2012 418 419 420 421 422 423 424 425 ### Internal links It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (
): html Link Link   426   Dan Dascalescu committed Nov 10, 2012 427 You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an enabled class when it's a valid navigation route based on the current slide.  428 429 430 431 432 433  html  Hakim El Hattab committed Nov 20, 2012 434   435 436 437 438    Hakim El Hattab committed Oct 20, 2012 439 ### Fragments  Hakim El Hattab committed Oct 11, 2013 440 Fragments are used to highlight individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/fragments  Hakim El Hattab committed Oct 20, 2012 441 442 443 444 445 446 447 448 449  The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment: html

grow

shrink

roll-in

fade-out

 Guillaume Turri committed Nov 26, 2013 450 451 

visible only once

blue only once

 Hakim El Hattab committed Oct 20, 2012 452 453 454 455 456 457 

highlight-red

highlight-green

highlight-blue

  Hakim El Hattab committed Nov 11, 2012 458 459 Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second.  Hakim El Hattab committed Nov 20, 2012 460 html  Hakim El Hattab committed Nov 11, 2012 461 
 Rob Schellhorn committed Jan 18, 2013 462   Hakim El Hattab committed Nov 11, 2012 463 464 465 466 467  I'll fade in, then out
  468 469 470 471 472 473 474 475 476 477 The display order of fragments can be controlled using the data-fragment-index attribute. html

Appears last

Appears first

Appears second

  478 479 480 481 ### Fragment events When a slide fragment is either shown or hidden reveal.js will dispatch an event.  Hakim El Hattab committed Jul 14, 2013 482 483 Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback.  Hakim El Hattab committed Jun 06, 2012 484 javascript  485 486 487 488 489 490 491 492 Reveal.addEventListener( 'fragmentshown', function( event ) { // event.fragment = the fragment DOM element } ); Reveal.addEventListener( 'fragmenthidden', function( event ) { // event.fragment = the fragment DOM element } );   wtw committed Mar 15, 2013 493 ### Code syntax highlighting  hakimel committed Jan 23, 2013 494   Hakim El Hattab committed Apr 27, 2013 495 By default, Reveal is configured with [highlight.js](http://softwaremaniacs.org/soft/highlight/en/) for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the data-trim attribute is present surrounding whitespace is automatically removed.  hakimel committed Jan 23, 2013 496 497 498  html
 Hakim El Hattab committed Apr 27, 2013 499 

hakimel committed Jan 23, 2013            500      501      502      503      504                                                                                                                                                                                                        (def lazy-fib   (concat    [0 1]    ((fn rfib [a b]         (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1))) 
Hakim El Hattab committed Jan 23, 2013    505                                                                                                                                                                                                                                            
 hakimel committed Jan 23, 2013 506 507 508 
  Hakim El Hattab committed Nov 28, 2013 509 510 511 512 513 514 515 ### Slide number If you would like to display the page number of the current slide you can do so using the slideNumber configuration value. javascript Reveal.configure({ slideNumber: true });   hakimel committed Jan 23, 2013 516   Hakim El Hattab committed Nov 20, 2012 517 518 ### Overview mode  Hakim El Hattab committed Jul 18, 2013 519 Press "Esc" or "o" keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,  hakimel committed Jan 21, 2013 520 521 522 523 524 525 526 527 528 as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks: javascript Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } ); Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } ); // Toggle the overview mode programmatically Reveal.toggleOverview();   Hakim El Hattab committed Nov 20, 2012 529 530 531 532  ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.  Hakim El Hattab committed Aug 20, 2012 533   Hakim El Hattab committed Apr 27, 2013 534 ### Embedded media  Hakim El Hattab committed Jul 22, 2013 535 Embedded HTML5 `