mypapers/webslides/demos/media.html

   1 <!doctype html>
   2 <html lang="en" prefix="og: http://ogp.me/ns#">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1">
   6
   7     <!-- CLEAN MARKUP = GOOD KARMA.
   8       Hi source code lover,
   9
  10       you're a curious person and a fast learner ;)
  11       Let's make something beautiful together. Contribute on Github:
  12       https://github.com/webslides/webslides
  13
  14       Thanks!
  15     -->
  16
  17     <!-- SEO -->
  18     <title>WebSlides Tutorial: Videos, Images, and Maps</title>
  19     <meta name="description" content="How to embed images, videos, and maps in your presentation.">
  20
  21     <!-- URL CANONICAL -->
  22     <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
  23
  24     <!-- Google Fonts -->
  25     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
  26
  27     <!-- CSS Base -->
  28     <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
  29
  30     <!-- Optional - CSS SVG Icons (Font Awesome) -->
  31     <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
  32
  33     <!-- SOCIAL CARDS (ADD YOUR INFO) -->
  34
  35     <!-- FACEBOOK -->
  36     <meta property="og:url" content="/" />
  37     <meta property="og:type" content="article" />
  38     <meta property="og:title" content="WebSlides Tutorial: Media" />
  39
  40     <!-- EDIT -->
  41     <meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
  42
  43     <!-- EDIT -->
  44     <meta property="og:updated_time" content="2017-01-04T17:25:31">
  45
  46     <!-- EDIT -->
  47     <meta property="og:image" content="../static/images/share-webslides.jpg" >
  48
  49     <!-- EDIT -->
  50
  51     <!-- TWITTER -->
  52     <meta name="twitter:card" content="summary_large_image">
  53     <meta name="twitter:site" content="@webslides">
  54
  55     <!-- EDIT -->
  56     <meta name="twitter:creator" content="@jlantunez">
  57
  58     <!-- EDIT -->
  59     <meta name="twitter:title" content="WebSlides Tutorial: Media">
  60
  61     <!-- EDIT -->
  62     <meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
  63
  64     <!-- EDIT -->
  65     <meta name="twitter:image" content="../static/images/share-webslides.jpg">
  66
  67     <!-- EDIT -->
  68
  69     <!-- FAVICONS -->
  70     <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
  71     <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
  72     <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
  73     <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
  74     <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
  75     <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
  76     <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
  77
  78     <!-- Android -->
  79     <meta name="mobile-web-app-capable" content="yes">
  80     <meta name="theme-color" content="#333333">
  81
  82   </head>
  83   <body>
  84     <header role="banner">
  85       <nav role="navigation">
  86         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
  87         <ul>
  88           <li class="github">
  89             <a rel="external" href="https://github.com/webslides/webslides" title="Github">
  90               <svg class="fa-github">
  91                 <use xlink:href="#fa-github"></use>
  92               </svg>
  93               <em>WebSlides</em>
  94             </a>
  95           </li>
  96           <li class="twitter">
  97             <a rel="external" href="https://twitter.com/webslides" title="Twitter">
  98               <svg class="fa-twitter">
  99                 <use xlink:href="#fa-twitter"></use>
 100               </svg>
 101               <em>@WebSlides</em>
 102             </a>
 103           </li>
 104           <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
 105         </ul>
 106       </nav>
 107     </header>
 108
 109     <main role="main">
 110       <article id="webslides">
 111
 112         <!-- Quick Guide
 113           - Each parent <section> in the <article id="webslides"> element is an individual slide.
 114           - Vertical sliding = <article id="webslides" class="vertical">
 115           - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
 116         -->
 117
 118         <section class="bg-black-blue aligncenter">
 119           <span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
 120           <!--.wrap = container (width: 90%) -->
 121           <div class="wrap">
 122             <p class="text-subtitle">WebSlides Tutorial</p>
 123             <h1 class="text-landing">Media</h1>
 124             <p class="text-symbols">* * *</p>
 125             <p>
 126               <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
 127                 <svg class="fa-github">
 128                   <use xlink:href="#fa-github"></use>
 129                 </svg>
 130                 Free Download
 131               </a>
 132             </p>
 133           </div>
 134           <!-- .end .wrap -->
 135         </section>
 136         <section class="aligncenter">
 137           <div class="wrap">
 138             <h2><strong>A quick reference guide for beginners</strong></h2>
 139             <p class="text-intro">Videos, images, maps, and charts.</p>
 140             <ul class="flexblock border">
 141               <li>
 142                 <!--div required = padding li or li>a-->
 143                 <div>
 144                   <h3><a target="_blank" href="#slide=3">Images</a></h3>
 145                   <ol>
 146                     <li><a target="_blank" href="#slide=4">Background Images</a></li>
 147                     <li><a target="_blank" href="#slide=9">Overlays (light and dark)</a></li>
 148                     <li><a target="_blank" href="#slide=11">500+ SVG Icons</a></li>
 149                     <li><a target="_blank" href="#slide=13">Logos</a></li>
 150                     <li><a target="_blank" href="#slide=14">Avatars</a></li>
 151                     <li><a target="_blank" href="#slide=15">Devices</a></li>
 152                     <li><a target="_blank" href="#slide=16">Screenshots</a></li>
 153                   </ol>
 154                 </div>
 155               </li>
 156               <li>
 157                 <!--div required = padding li or li>a-->
 158                 <div>
 159                   <h3><a target="_blank" href="#slide=17">Videos</a></h3>
 160                   <ol>
 161                     <li><a target="_blank" href="#slide=18">Background Videos (hosted & overlay)</a></li>
 162                     <li><a target="_blank" href="#slide=22">Embedding YouTube videos</a></li>
 163                     <li><a target="_blank" href="#slide=24">Fullscreen YouTube videos</a></li>
 164                     <li>
 165                       <a target="_blank" href="#slide=26"><strong>YouTube API:</strong></a>
 166                       <ol>
 167                         <li><a target="_blank" href="#slide=27">Autoplay, loop, mute, and no controls</a></li>
 168                         <li><a target="_blank" href="#slide=30">Fullscreen video</a></li>
 169                         <li><a target="_blank" href="#slide=32">Background video with overlay</a></li>
 170                       </ol>
 171                     </li>
 172                   </ol>
 173                 </div>
 174               </li>
 175               <li>
 176                 <!--div required = padding li or li>a-->
 177                 <div>
 178                   <h3><a target="_blank" href="#slide=34">Maps & Charts</a></h3>
 179                   <ol>
 180                     <li><a target="_blank" href="#slide=35">Embedding maps</a></li>
 181                     <li><a target="_blank" href="#slide=36">Embedding the map in a card</a></li>
 182                     <li><a target="_blank" href="#slide=37">Fullscreen maps</a></li>
 183                     <li><a target="_blank" href="#slide=38">Embedding charts</a></li>
 184                   </ol>
 185                 </div>
 186               </li>
 187             </ul>
 188           </div>
 189           <!-- .end .wrap -->
 190         </section>
 191         <section>
 192           <div class="wrap aligncenter">
 193             <h3>
 194               <svg class="fa-camera">
 195                 <use xlink:href="#fa-camera"></use>
 196               </svg>
 197               Insert images wherever you want
 198             </h3>
 199             <p class="text-intro">15 different positions.</p>
 200           </div>
 201           <!-- .end .wrap -->
 202         </section>
 203         <section>
 204           <div class="wrap">
 205             <h3>15 Different Backgrounds</h3>
 206             <ul class="text-cols">
 207               <li><strong>.background</strong> (fullscreen)</li>
 208               <li>.background-top (cover)</li>
 209               <li>.background-bottom (cover)</li>
 210               <li>.background.light (opacity)</li>
 211               <li>.background.dark (opacity)</li>
 212               <li>.background-center</li>
 213               <li>.background-center-top</li>
 214               <li>.background-center-bottom</li>
 215               <li>.background-left</li>
 216               <li>.background-left-top</li>
 217               <li>.background-left-bottom</li>
 218               <li>.background-right</li>
 219               <li>.background-right-top</li>
 220               <li>.background-right-bottom</li>
 221               <li>.background-anim (animated)</li>
 222             </ul>
 223           </div>
 224           <!-- .end .wrap -->
 225         </section>
 226         <section>
 227           <div class="wrap size-50">
 228             <h4>
 229               <svg class="fa-camera">
 230                 <use xlink:href="#fa-camera"></use>
 231               </svg>
 232               .background = Fullscreen Backgrounds
 233             </h4>
 234             <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
 235             <pre>&lt;section&gt;
 236   &lt;span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"&gt;&lt;/span&gt;
 237   &lt;div class="wrap"&gt;
 238     &lt;h1&gt;Slide&lt;/h1&gt;
 239   &lt;/div&gt;
 240 &lt;/section&gt;</pre>
 241             <p>
 242               <svg class="fa-info">
 243                 <use xlink:href="#fa-info"></use>
 244               </svg>
 245               Position .background outside of .wrap container.
 246             </p>
 247           </div>
 248           <!-- .end .wrap -->
 249         </section>
 250         <section>
 251           <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
 252           <div class="wrap">
 253             <div class="content-left">
 254               <h3>.background-(position)</h3>
 255               <p><code>.background-right-bottom</code></p>
 256               <ul class="flexblock specs">
 257                 <li>
 258                   <div>
 259                     <svg class="fa-wifi">
 260                       <use xlink:href="#fa-wifi"></use>
 261                     </svg>
 262                     <h2>Ultra-Fast WiFi</h2>
 263                     Simple and secure file sharing.
 264                   </div>
 265                 </li>
 266                 <li>
 267                   <div>
 268                     <svg class="fa-battery-full">
 269                       <use xlink:href="#fa-battery-full"></use>
 270                     </svg>
 271                     <h2>All day battery life</h2>
 272                     Your battery worries may be over.
 273                   </div>
 274                 </li>
 275                 <li>
 276                   <div>
 277                     <svg class="fa-life-ring">
 278                       <use xlink:href="#fa-life-ring"></use>
 279                     </svg>
 280                     <h2>Lifetime Warranty </h2>
 281                     We'll fix it or if we can't, we'll replace it.
 282                   </div>
 283                 </li>
 284               </ul>
 285             </div>
 286           </div>
 287           <!-- .end .wrap -->
 288         </section>
 289         <section>
 290           <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
 291           <div class="wrap">
 292             <div class="content-right">
 293               <h3>.background-(position)</h3>
 294               <p><code>.background-left-bottom</code></p>
 295               <ul class="flexblock specs">
 296                 <li>
 297                   <div>
 298                     <svg class="fa-wifi">
 299                       <use xlink:href="#fa-wifi"></use>
 300                     </svg>
 301                     <h2>Ultra-Fast WiFi</h2>
 302                     Simple and secure file sharing.
 303                   </div>
 304                 </li>
 305                 <li>
 306                   <div>
 307                     <svg class="fa-battery-full">
 308                       <use xlink:href="#fa-battery-full"></use>
 309                     </svg>
 310                     <h2>All day battery life</h2>
 311                     Your battery worries may be over.
 312                   </div>
 313                 </li>
 314                 <li>
 315                   <div>
 316                     <svg class="fa-life-ring">
 317                       <use xlink:href="#fa-life-ring"></use>
 318                     </svg>
 319                     <h2>Lifetime Warranty </h2>
 320                     We'll fix it or if we can't, we'll replace it.
 321                   </div>
 322                 </li>
 323               </ul>
 324             </div>
 325           </div>
 326           <!-- .end .wrap -->
 327         </section>
 328         <section class="aligncenter bg-black">
 329           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
 330           <!--.wrap = container (width: 90%) -->
 331           <div class="wrap">
 332             <h2>.background.anim</h2>
 333           </div>
 334           <!-- .end .wrap -->
 335         </section>
 336         <section class="bg-black aligncenter">
 337           <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
 338           <div class="wrap size-50">
 339             <h1 class="text-landing text-shadow">Opacity</h1>
 340             <p><code>[class*="bg-"] > .background.light</code></p>
 341             <pre>&lt;section class="bg-black"&gt;
 342   &lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
 343   &lt;div class="wrap"&gt;
 344     &lt;h1&gt;Slide&lt;/h1&gt;
 345   &lt;/div&gt;
 346 &lt;/section&gt;</pre>
 347           </div>
 348         </section>
 349         <section class="bg-black aligncenter">
 350           <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span>
 351           <div class="wrap size-50">
 352             <h1 class="text-landing text-shadow">Opacity</h1>
 353             <p><code>[class*="bg-"] > .background.dark</code></p>
 354             <pre>&lt;section class="bg-black"&gt;
 355   &lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
 356   &lt;div class="wrap"&gt;
 357     &lt;h1&gt;Slide&lt;/h1&gt;
 358   &lt;/div&gt;
 359 &lt;/section&gt;</pre>
 360           </div>
 361         </section>
 362         <section>
 363           <div class="wrap size-50">
 364             <p class="text-subtitle">Optional &middot; 500+ icons</p>
 365             <h2>
 366               <a href="http://fontawesome.io/icons/">
 367                 <svg class="fa-flag">
 368                   <use xlink:href="#fa-flag"></use>
 369                 </svg>
 370                 Font Awesome
 371               </a>
 372               as SVG icons
 373             </h2>
 374             <pre>&lt;svg class="fa-flag"&gt;
 375         &lt;use xlink:href="#fa-flag"&gt;&lt;/use&gt;
 376 &lt;/svg&gt;</pre>
 377             <p>How to change icons?</p>
 378             <ol class="text-cols">
 379               <li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
 380               <li>Create a free account.</li>
 381               <li>Select new icons.</li>
 382               <li>Publish as SVG sprite.</li>
 383               <li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
 384             </ol>
 385           </div>
 386           <!-- .end .wrap -->
 387         </section>
 388         <section class="bg-green">
 389           <div class="wrap">
 390             <h3>ul.flexblock.metrics.border</h3>
 391             <!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
 392             <ul class="flexblock metrics border">
 393               <li> Founded
 394                 <span>2024</span>
 395               </li>
 396               <li>
 397                 <span>
 398                   <svg class="fa-users">
 399                     <use xlink:href="#fa-users"></use>
 400                   </svg>
 401                 </span>
 402                 24M Subscribers
 403               </li>
 404               <li>
 405                 <span>
 406                   <svg class="fa-line-chart">
 407                     <use xlink:href="#fa-line-chart"></use>
 408                   </svg>
 409                 </span>
 410                 Revenue: $16M
 411               </li>
 412               <li>
 413                 Monthly Growth
 414                 <span>64%</span>
 415               </li>
 416               <li>
 417                 <span>
 418                   <svg class="fa-building-o">
 419                     <use xlink:href="#fa-building-o"></use>
 420                   </svg>
 421                 </span>
 422                 8 Offices
 423               </li>
 424               <li>
 425                 <span>
 426                   <svg class="fa-smile-o">
 427                     <use xlink:href="#fa-smile-o"></use>
 428                   </svg>
 429                 </span>
 430                 48 Employees
 431               </li>
 432               <li>
 433                 <span>
 434                   <svg class="fa-usd">
 435                     <use xlink:href="#fa-usd"></use>
 436                   </svg>
 437                 </span>
 438                 EBITDA: $2,4M
 439               </li>
 440               <li>
 441                 <span>
 442                   <svg class="fa-university">
 443                     <use xlink:href="#fa-university"></use>
 444                   </svg>
 445                 </span>
 446                 Bank: $32M
 447               </li>
 448             </ul>
 449           </div>
 450           <!-- .end .wrap -->
 451         </section>
 452         <section>
 453           <div class="wrap">
 454             <h2>Transparent Logos</h2>
 455             <p>
 456               Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
 457             </p>
 458             <hr>
 459             <ul class="flexblock blink">
 460               <li>
 461                 <a href="#" title="Block Link = .blink">
 462                   <div>
 463                     <img src="../static/images/logos/google.svg" alt="Google">
 464                     <p><strong>Height recommended</strong>: 48px</p>
 465                   </div>
 466                 </a>
 467               </li>
 468               <li>
 469                 <a href="#" title="Block Link = .blink">
 470                   <div>
 471                     <img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
 472                     <p><code>img.blacklogo</code></p>
 473                   </div>
 474                 </a>
 475               </li>
 476               <li>
 477                 <a href="#" title="Block Link = .blink">
 478                   <div>
 479                     <img class="graylogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
 480                     <p><code>img.graylogo</code></p>
 481                   </div>
 482                 </a>
 483               </li>
 484               <li class="bg-blue">
 485                 <a href="" title="Block Link = .blink">
 486                   <div>
 487                     <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
 488                     <p><code>img.whitelogo</code></p>
 489                   </div>
 490                 </a>
 491               </li>
 492             </ul>
 493           </div>
 494           <!-- .end .wrap -->
 495         </section>
 496         <section>
 497           <!--.wrap = container (width: 90%) -->
 498           <div class="wrap">
 499             <blockquote class="text-quote">
 500               <p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p>
 501               <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
 502             </blockquote>
 503             <hr>
 504             <p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p>
 505           </div>
 506           <!-- .end .wrap -->
 507         </section>
 508         <section>
 509           <div class="wrap">
 510             <div class="grid vertical-align">
 511               <div class="column">
 512                 <h2>Devices</h2>
 513                 <ul class="flexblock specs">
 514                   <li>
 515                     <div>
 516                       <svg class="fa-wifi">
 517                         <use xlink:href="#fa-wifi"></use>
 518                       </svg>
 519                       <h2>Ultra-Fast WiFi</h2>
 520                       Simple and secure file sharing.
 521                     </div>
 522                   </li>
 523                   <li>
 524                     <div>
 525                       <svg class="fa-battery-full">
 526                         <use xlink:href="#fa-battery-full"></use>
 527                       </svg>
 528                       <h2>All day battery life</h2>
 529                       Your battery worries may be over.
 530                     </div>
 531                   </li>
 532                   <li>
 533                     <div>
 534                       <svg class="fa-life-ring">
 535                         <use xlink:href="#fa-life-ring"></use>
 536                       </svg>
 537                       <h2>Lifetime Warranty </h2>
 538                       We'll fix it or if we can't, we'll replace it.
 539                     </div>
 540                   </li>
 541                 </ul>
 542               </div>
 543               <!-- end .column-->
 544               <div class="column">
 545                 <figure>
 546                   <img class="aligncenter" src="../static/images/iphone.png" alt="iPhone">
 547                 </figure>
 548               </div>
 549               <!-- end .column-->
 550             </div>
 551             <!-- end .grid-->
 552           </div>
 553           <!-- end .wrap-->
 554         </section>
 555         <section>
 556           <div class="wrap">
 557             <div class="content-left">
 558               <figure class="browser">
 559                 <img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg">
 560               </figure>
 561             </div>
 562             <!-- .end .content-left -->
 563             <div class="content-left">
 564               <h2>Screenshots</h2>
 565               <p>HTML/CSS Browser.</p>
 566               <pre>&lt;figure class="browser"&gt;
 567   &lt;img alt="Screenshot" src="image.jpg"&gt;
 568 &lt;/figure&gt;</pre>
 569             </div>
 570             <!-- .end .content-left -->
 571           </div>
 572           <!-- .end .wrap -->
 573         </section>
 574         <section class="bg-blue">
 575           <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
 576           <!-- background with a frame frame -->
 577           <span class="background frame"></span>
 578           <div class="wrap aligncenter">
 579             <h2>
 580               Videos
 581             </h2>
 582           </div>
 583           <!-- .end .wrap -->
 584         </section>
 585         <section>
 586           <div class="wrap size-60">
 587             <h3>Background videos</h3>
 588             <pre><strong>&lt;section class="fullscreen"&gt;</strong>
 589   &lt;div class="embed"&gt;
 590     &lt;video autoplay loop poster="image.jpg"&gt;
 591       &lt;source src="video.mp4" type="video/mp4"&gt;
 592     &lt;/video&gt;
 593   &lt;/div&gt;
 594 <strong>&lt;/section&gt;</strong>
 595 </pre>
 596             <p>.fullscreen > .embed (responsive) > video</p>
 597           </div>
 598           <!-- .end .wrap -->
 599         </section>
 600         <section class="fullscreen aligncenter">
 601           <div class="embed">
 602             <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
 603               <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
 604             </video>
 605           </div>
 606         </section>
 607         <section>
 608           <div class="wrap size-60">
 609             <h3>Background videos</h3>
 610             <p>Transparent overlay:</p>
 611             <pre><strong>&lt;section class="fullscreen bg-blue"&gt;</strong>
 612   &lt;div class="embed <strong>dark</strong>"&gt;
 613     &lt;video autoplay muted loop poster="image.jpg"&gt;
 614       &lt;source src="video.mp4" type="video/mp4"&gt;
 615     &lt;/video&gt;
 616   &lt;/div&gt;
 617 <strong>&lt;/section&gt;</strong>
 618 </pre>
 619             <p>.fullscreen.bg-blue > .embed.dark (or .light) > video</p>
 620           </div>
 621           <!-- .end .wrap -->
 622         </section>
 623         <section class="fullscreen bg-blue aligncenter">
 624           <div class="embed dark">
 625             <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
 626               <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
 627             </video>
 628           </div>
 629           <!-- .end .embed -->
 630           <div class="wrap">
 631             <h2><strong>Muted</strong></h2>
 632             <p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
 633           </div>
 634           <!-- .end .wrap -->
 635         </section>
 636         <section>
 637           <div class="wrap">
 638             <div class="content-left">
 639               <h3>Responsive Videos</h3>
 640               <p>Just copy and paste the code from YouTube to your slide.</p>
 641               <pre>&lt;div class="embed"&gt;
 642  <strong>&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
 643  &lt;/iframe&gt;</strong>
 644 &lt;/div&gt;</pre>
 645               <p><code>.embed</code> (responsive)</p>
 646             </div>
 647             <!-- end .content-left -->
 648             <div class="content-left">
 649               <!-- <div class="embed"> = Responsive -->
 650               <div class="embed">
 651                 <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
 652               </div>
 653               <!-- end .embed -->
 654             </div>
 655             <!-- end .content-left -->
 656           </div>
 657           <!-- .end .wrap -->
 658         </section>
 659         <section>
 660           <div class="wrap size-60">
 661             <!-- Responsive video/iframe... Add <div class="embed"> -->
 662             <div class="embed">
 663               <iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
 664             </div>
 665             <!-- .end .embed -->
 666           </div>
 667           <!-- .end .wrap -->
 668         </section>
 669         <section>
 670           <div class="wrap size-60">
 671             <h3>Fullscreen YouTube Video</h3>
 672             <pre><strong>&lt;section class="fullscreen"&gt;</strong>
 673   &lt;div class="embed"&gt;
 674     &lt;iframe src="https://www.youtube.com/embed/iY05U7GaU5I"&gt;
 675     &lt;/iframe&gt;
 676   &lt;/div&gt;
 677 <strong>&lt;/section&gt;</strong>
 678 </pre>
 679             <p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p>
 680           </div>
 681           <!-- .end .wrap -->
 682         </section>
 683         <section class="fullscreen">
 684           <!-- Fullscreen Video -->
 685           <div class="embed">
 686             <iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
 687           </div>
 688           <!-- .end .embed -->
 689         </section>
 690         <section class="frame">
 691           <p class="aligncenter">
 692             <svg class="fa-thumbs-up large">
 693               <use xlink:href="#fa-thumbs-up"></use>
 694             </svg>
 695           </p>
 696           <div class="wrap size-60 bg-white">
 697             <h3>
 698               <a href="https://developers.google.com/youtube">
 699                 <svg class="fa-youtube">
 700                   <use xlink:href="#fa-youtube"></use>
 701                 </svg>
 702                 YouTube API
 703               </a>
 704             </h3>
 705             <p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p>
 706             <p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p>
 707           </div>
 708           <!-- .end .wrap -->
 709         </section>
 710         <section>
 711           <div class="wrap">
 712             <h3>
 713               <svg class="fa-youtube">
 714                 <use xlink:href="#fa-youtube"></use>
 715               </svg>
 716               YouTube API Parameters
 717             </h3>
 718             <p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
 719             <hr>
 720             <div class="grid">
 721               <div class="column">
 722                 <pre>&lt;div class="embed"&gt;
 723   <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt;
 724   &lt;/div&gt;</strong>
 725 &lt;/div&gt;</pre>
 726                 <p>autoplay + loop</p>
 727               </div>
 728               <!-- .end .column -->
 729               <div class="column">
 730                 <pre>&lt;div class="embed"&gt;
 731   <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt;
 732   &lt;/div&gt;</strong>
 733 &lt;/div&gt;</pre>
 734                 <p>autoplay + mute + no controls.</p>
 735               </div>
 736               <!-- .end .column -->
 737             </div>
 738             <!-- .end .grid -->
 739           </div>
 740           <!-- .end .wrap -->
 741         </section>
 742         <section>
 743           <div class="wrap">
 744             <div class="content-left">
 745               <h3>YouTube API</h3>
 746               <p><code>autoplay + loop</code></p>
 747               <pre>&lt;div class="embed"&gt;
 748   &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
 749   &lt;/div&gt;
 750 &lt;/div&gt;</pre>
 751             </div>
 752             <!-- end .content-left -->
 753             <div class="content-left">
 754               <!-- <div class="embed"> = Responsive -->
 755               <div class="embed">
 756                 <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
 757               </div>
 758               <!-- end .embed -->
 759             </div>
 760             <!-- end .content-left -->
 761           </div>
 762           <!-- .end .wrap -->
 763         </section>
 764         <section class="frame">
 765           <div class="wrap size-60 bg-white">
 766             <h3>
 767               <svg class="fa-info-circle large">
 768                 <use xlink:href="#fa-info-circle"></use>
 769               </svg>
 770               <strong>Autoplay Feature</strong>
 771             </h3>
 772             <p class="text-intro">Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.</p>
 773           </div>
 774           <!-- .end .wrap -->
 775         </section>
 776         <section>
 777           <div class="wrap size-70">
 778             <h3><strong>Let's make some magic with the YouTube API</strong></h3>
 779             <p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
 780             <hr>
 781             <pre><strong>&lt;section class="fullscreen"&gt;</strong>
 782   &lt;div class="embed"&gt;
 783     &lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&lt;/div&gt;
 784   &lt;/div&gt;
 785 <strong>&lt;/section&gt;</strong>
 786 </pre>
 787             <p>The video will automatically play when the slide is loaded.</p>
 788           </div>
 789           <!-- .end .wrap -->
 790         </section>
 791         <section class="fullscreen">
 792           <!-- Fullscreen Video -->
 793           <div class="embed">
 794             <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
 795           </div>
 796           <!-- .end .embed -->
 797         </section>
 798         <section>
 799           <div class="wrap size-70">
 800             <h3><strong>Fullscreen YouTube video background</strong></h3>
 801             <p>Overlaying a transparent background on an embedded Youtube video:</p>
 802             <hr>
 803             <pre><strong>&lt;section class="fullscreen bg-black"&gt;</strong>
 804   &lt;div class="embed dark"&gt;
 805     &lt;div data-youtube data-youtube-id=&quot;c9psfOxJysw&quot; <strong>data-autoplay data-loop data-mute data-no-controls</strong>&lt;/div&gt;
 806   &lt;/div&gt;
 807 <strong>&lt;/section&gt;</strong>
 808 </pre>
 809             <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
 810           </div>
 811           <!-- .end .wrap -->
 812         </section>
 813         <section class="fullscreen bg-blue">
 814           <!-- Fullscreen Video -->
 815           <div class="embed dark">
 816             <div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
 817           </div>
 818           <!-- .end .embed -->
 819           <div class="wrap aligncenter">
 820             <h2><strong>Overlay</strong></h2>
 821             <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
 822           </div>
 823           <!-- .end .wrap -->
 824         </section>
 825         <section class="bg-primary">
 826           <span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
 827           <div class="wrap aligncenter">
 828             <h3>
 829               <svg class="fa-map">
 830                 <use xlink:href="#fa-map"></use>
 831               </svg>
 832               Maps & Charts
 833             </h3>
 834           </div>
 835           <!-- .end .wrap -->
 836         </section>
 837         <section class="bg-black-blue">
 838           <div class="wrap size-50">
 839             <p class="text-context">Status of Net Neutrality around the world.</p>
 840             <div class="embed">
 841               <iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
 842             </div>
 843             <!-- .end .embed -->
 844           </div>
 845           <!-- .end .wrap -->
 846         </section>
 847         <section>
 848           <div class="wrap">
 849             <div class="card-50 bg-white">
 850               <figure>
 851                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
 852                 <figcaption>
 853                   <a href="https://maps.google.com" title="Google Maps">
 854                     <svg class="fa-map">
 855                       <use xlink:href="#fa-map"></use>
 856                     </svg>
 857                     Google Maps
 858                   </a>
 859                 </figcaption>
 860               </figure>
 861               <!-- end figure-->
 862               <div class="flex-content">
 863                 <h2>
 864                   Discover Seville
 865                 </h2>
 866                 <p>.card-50.bg-white</p>
 867                 <ul class="description">
 868                   <li>
 869                     <strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup>
 870                   </li>
 871                   <li><strong class="text-label" title="Population">Population:</strong> 703,021</li>
 872                   <li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
 873                 </ul>
 874                 <p>
 875                   There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies.
 876                 </p>
 877               </div>
 878               <!-- end .flex-content-->
 879             </div>
 880             <!-- end .card-50-->
 881           </div>
 882           <!-- .end .wrap -->
 883         </section>
 884         <section class="fullscreen">
 885           <div class="embed">
 886             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
 887           </div>
 888           <!-- .end .embed -->
 889         </section>
 890         <section>
 891           <div class="wrap size-60">
 892             <h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
 893             <!-- Responsive video/iframe/chart... Add <div class="embed"> -->
 894             <div class="embed">
 895               <!-- I love Quartz's charts -->
 896               <div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div>
 897               <script src="https://www.theatlas.com/javascripts/atlas.js"></script>
 898             </div>
 899             <!-- end .embed -->
 900           </div>
 901           <!-- .end .wrap -->
 902         </section>
 903         <section class="aligncenter">
 904           <!-- .wrap = container width: 90% -->
 905           <div class="wrap">
 906             <h2><strong>Start in seconds</strong></h2>
 907             <p class="text-intro">120+ prebuilt slides ready to use.</p>
 908             <p>
 909               <a href="https://webslides.tv/webslides-latest.zip" class="button ga-track" data-ga-text="Download WebSlides (last slide demos)" title="Download WebSlides">
 910                 <svg class="fa-cloud-download">
 911                   <use xlink:href="#fa-cloud-download"></use>
 912                 </svg>
 913                 Free Download
 914               </a>
 915               <span class="try">
 916                 <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
 917                   <svg class="fa-paypal">
 918                     <use xlink:href="#fa-paypal"></use>
 919                   </svg>
 920                   Pay what you want.
 921                 </a>
 922               </span>
 923             </p>
 924           </div>
 925           <!-- .end .wrap -->
 926         </section>
 927         <section class="bg-primary aligncenter">
 928           <h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2>
 929           <h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3>
 930         </section>
 931
 932       </article>
 933     </main>
 934     <!--main-->
 935     <!-- Required -->
 936
 937     <script src="../static/js/webslides.js"></script>
 938
 939     <script>
 940       window.ws = new WebSlides();
 941     </script>
 942
 943     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
 944     <script defer src="../static/js/svg-icons.js"></script>
 945
 946   </body>
 947 </html>