mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-17 02:24:12 +02:00
WebSlides Demo: Media (videos, images, maps...)
This commit is contained in:
José Luis Antúnez
committed by
GitHub
GitHub
parent
56114d1464
commit
40fdcf7e86
707
demos/media.html
Normal file
707
demos/media.html
Normal file
@@ -0,0 +1,707 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" prefix="og: http://ogp.me/ns#">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<!-- CLEAN MARKUP = GOOD KARMA.
|
||||||
|
Hi source code lover,
|
||||||
|
|
||||||
|
you're a curious person and a fast learner ;)
|
||||||
|
Let's make something beautiful together. Contribute on Github:
|
||||||
|
https://github.com/jlantunez/webslides
|
||||||
|
|
||||||
|
Thanks,
|
||||||
|
@jlantunez.
|
||||||
|
-->
|
||||||
|
<!-- SEO -->
|
||||||
|
<title>WebSlides Tutorial: Videos, Images, and Maps</title>
|
||||||
|
<meta name="description" content="How to embed images, videos, and maps in your presentation.">
|
||||||
|
|
||||||
|
<!-- URL CANONICAL -->
|
||||||
|
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- CSS Base -->
|
||||||
|
<link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css">
|
||||||
|
|
||||||
|
<!-- CSS Colors -->
|
||||||
|
<link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css">
|
||||||
|
|
||||||
|
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||||
|
<link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
|
||||||
|
|
||||||
|
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||||||
|
|
||||||
|
<!-- FACEBOOK -->
|
||||||
|
<meta property="og:url" content="/" />
|
||||||
|
<meta property="og:type" content="article" />
|
||||||
|
<meta property="og:title" content="WebSlides Tutorial: Media" />
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
|
<meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
|
<meta property="og:updated_time" content="2017-01-04T17:25:31">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
|
<meta property="og:image" content="../static/images/share-webslides.jpg" >
|
||||||
|
<!-- EDIT -->
|
||||||
|
|
||||||
|
<!-- TWITTER -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:site" content="@webslides">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
|
<meta name="twitter:creator" content="@jlantunez">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
|
<meta name="twitter:title" content="WebSlides Tutorial: Media">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
|
<meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
|
<meta name="twitter:image" content="../static/images/share-webslides.jpg">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
|
|
||||||
|
<!-- FAVICONS -->
|
||||||
|
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
||||||
|
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
|
||||||
|
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
|
||||||
|
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
|
||||||
|
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
|
||||||
|
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
|
||||||
|
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
|
||||||
|
|
||||||
|
<!-- Android -->
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="theme-color" content="#333333">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header role="banner">
|
||||||
|
<nav role="navigation">
|
||||||
|
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
|
||||||
|
<ul>
|
||||||
|
<li class="github">
|
||||||
|
<a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
|
||||||
|
<svg class="fa-github">
|
||||||
|
<use xlink:href="#fa-github"></use>
|
||||||
|
</svg>
|
||||||
|
<em>WebSlides</em>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="twitter">
|
||||||
|
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
||||||
|
<svg class="fa-twitter">
|
||||||
|
<use xlink:href="#fa-twitter"></use>
|
||||||
|
</svg>
|
||||||
|
<em>@WebSlides</em>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main role="main">
|
||||||
|
<article id="webslides" class="vertical">
|
||||||
|
<!-- Quick Guide
|
||||||
|
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
||||||
|
- Vertical sliding = <article id="webslides" class="vertical">
|
||||||
|
- <div class="wrap"> = container 1200px
|
||||||
|
-->
|
||||||
|
<section class="bg-black-blue aligncenter">
|
||||||
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
|
||||||
|
<!--.wrap = container 1200px -->
|
||||||
|
<div class="wrap">
|
||||||
|
<p class="text-subtitle">WebSlides Tutorial</p>
|
||||||
|
<h1 class="text-landing">Media</h1>
|
||||||
|
<p class="text-symbols">* * *</p>
|
||||||
|
<p>
|
||||||
|
<a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
|
||||||
|
<svg class="fa-github">
|
||||||
|
<use xlink:href="#fa-github"></use>
|
||||||
|
</svg>
|
||||||
|
Free Download
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="aligncenter">
|
||||||
|
<div class="wrap">
|
||||||
|
<h2><strong>A quick reference guide for beginners</strong></h2>
|
||||||
|
<p class="text-intro">Videos, images, maps, and charts.</p>
|
||||||
|
<ul class="flexblock border">
|
||||||
|
<li>
|
||||||
|
<!--div required = padding li or li>a-->
|
||||||
|
<div>
|
||||||
|
<h3><a target="_blank" href="#slide=3">Images</a></h3>
|
||||||
|
<ol>
|
||||||
|
<li><a target="_blank" href="#slide=4">Background Images</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=6">Overlays (light and dark)</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=10">500+ SVG Icons</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=11">Logos</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=12">Avatars</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=13">Devices</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=14">Screenshots</a></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!--div required = padding li or li>a-->
|
||||||
|
<div>
|
||||||
|
<h3><a target="_blank" href="#slide=15">Videos</a></h3>
|
||||||
|
<ol>
|
||||||
|
<li><a target="_blank" href="#slide=16">Background Videos</a></li>
|
||||||
|
<li>
|
||||||
|
<a target="_blank" href="#slide=18"><strong>YouTube Videos</strong></a>
|
||||||
|
<ol>
|
||||||
|
<li><a target="_blank" href="#slide=21">Fullscreen</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=23">No controls</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=26">Autoplay</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=28">Loop</a></li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!--div required = padding li or li>a-->
|
||||||
|
<div>
|
||||||
|
<h3><a target="_blank" href="#slide=94">Maps & Charts</a></h3>
|
||||||
|
<ol>
|
||||||
|
<li><a target="_blank" href="#slide=108">Embedding a Google Maps</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=110">Fullscreen maps</a></li>
|
||||||
|
<li><a target="_blank" href="#slide=109">Embedding charts</a></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<span class="background-bottom" style="background-image:url('https://source.unsplash.com/GQD3Av_9A88/1600x800)"></span>
|
||||||
|
<div class="wrap aligncenter">
|
||||||
|
<h3>
|
||||||
|
<svg class="fa-camera">
|
||||||
|
<use xlink:href="#fa-camera"></use>
|
||||||
|
</svg>
|
||||||
|
Insert images wherever you want
|
||||||
|
</h3>
|
||||||
|
<p class="text-intro">15 different positions.</p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap">
|
||||||
|
<h3>15 Different Backgrounds</h3>
|
||||||
|
<ul class="text-cols">
|
||||||
|
<li><strong>.background</strong> (fullscreen)</li>
|
||||||
|
<li>.background-top (cover)</li>
|
||||||
|
<li>.background-bottom (cover)</li>
|
||||||
|
<li>.background.light (opacity)</li>
|
||||||
|
<li>.background.dark (opacity)</li>
|
||||||
|
<li>.background-center</li>
|
||||||
|
<li>.background-center-top</li>
|
||||||
|
<li>.background-center-bottom</li>
|
||||||
|
<li>.background-left</li>
|
||||||
|
<li>.background-left-top</li>
|
||||||
|
<li>.background-left-bottom</li>
|
||||||
|
<li>.background-right</li>
|
||||||
|
<li>.background-right-top</li>
|
||||||
|
<li>.background-right-bottom</li>
|
||||||
|
<li>.background-anim (animated)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-50">
|
||||||
|
<h4>
|
||||||
|
<svg class="fa-camera">
|
||||||
|
<use xlink:href="#fa-camera"></use>
|
||||||
|
</svg>
|
||||||
|
img.background = Fullscreen Backgrounds
|
||||||
|
</h4>
|
||||||
|
<p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? →</a></p>
|
||||||
|
<pre><section>
|
||||||
|
<span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
|
||||||
|
<div class="wrap">
|
||||||
|
<h1>Slide</h1>
|
||||||
|
</div>
|
||||||
|
</section></pre>
|
||||||
|
<p>
|
||||||
|
<svg class="fa-info">
|
||||||
|
<use xlink:href="#fa-info"></use>
|
||||||
|
</svg>
|
||||||
|
Position .background outside of .wrap container.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="content-left">
|
||||||
|
<h3>.background-(position)</h3>
|
||||||
|
<p><code>.background-right-bottom</code></p>
|
||||||
|
<ul class="flexblock specs">
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<svg class="fa-wifi">
|
||||||
|
<use xlink:href="#fa-wifi"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>Ultra-Fast WiFi</h2>
|
||||||
|
Simple and secure file sharing.
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<svg class="fa-battery-full">
|
||||||
|
<use xlink:href="#fa-battery-full"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>All day battery life</h2>
|
||||||
|
Your battery worries may be over.
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<svg class="fa-life-ring">
|
||||||
|
<use xlink:href="#fa-life-ring"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>Lifetime Warranty </h2>
|
||||||
|
We'll fix it or if we can't, we'll replace it.
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="aligncenter bg-black">
|
||||||
|
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||||||
|
<!--.wrap = container 1200px -->
|
||||||
|
<div class="wrap">
|
||||||
|
<h2>.background.anim</h2>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="bg-black aligncenter">
|
||||||
|
<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||||
|
<div class="wrap size-50">
|
||||||
|
<h1 class="text-landing text-shadow">Opacity</h1>
|
||||||
|
<p><code>[class*="bg-"] > .background.light</code></p>
|
||||||
|
<pre><section class="bg-black">
|
||||||
|
<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||||
|
<div class="wrap">
|
||||||
|
<h1>Slide</h1>
|
||||||
|
</div>
|
||||||
|
</section></pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="bg-black aligncenter">
|
||||||
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span>
|
||||||
|
<div class="wrap size-50">
|
||||||
|
<h1 class="text-landing text-shadow">Opacity</h1>
|
||||||
|
<p><code>[class*="bg-"] > .background.dark</code></p>
|
||||||
|
<pre><section class="bg-black">
|
||||||
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||||
|
<div class="wrap">
|
||||||
|
<h1>Slide</h1>
|
||||||
|
</div>
|
||||||
|
</section></pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-50">
|
||||||
|
<p class="text-subtitle">Optional · 500+ icons</p>
|
||||||
|
<h2>
|
||||||
|
<a href="http://fontawesome.io/icons/">
|
||||||
|
<svg class="fa-flag">
|
||||||
|
<use xlink:href="#fa-flag"></use>
|
||||||
|
</svg>
|
||||||
|
Font Awesome
|
||||||
|
</a>
|
||||||
|
as SVG icons
|
||||||
|
</h2>
|
||||||
|
<pre><svg class="fa-flag">
|
||||||
|
<use xlink:href="#fa-flag"></use>
|
||||||
|
</svg></pre>
|
||||||
|
<p>How to change icons?</p>
|
||||||
|
<ol class="text-cols">
|
||||||
|
<li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
|
||||||
|
<li>Create a free account.</li>
|
||||||
|
<li>Select new icons.</li>
|
||||||
|
<li>Publish as SVG sprite.</li>
|
||||||
|
<li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap">
|
||||||
|
<h2>Transparent Logos</h2>
|
||||||
|
<p>
|
||||||
|
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
<ul class="flexblock blink">
|
||||||
|
<li>
|
||||||
|
<a href="#" title="Block Link = .blink">
|
||||||
|
<div>
|
||||||
|
<img src="../static/images/logos/google.svg" alt="Google">
|
||||||
|
<p><strong>Height recommended</strong>: 48px</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" title="Block Link = .blink">
|
||||||
|
<div>
|
||||||
|
<img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
|
||||||
|
<p><code>img.blacklogo</code></p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" title="Block Link = .blink">
|
||||||
|
<div>
|
||||||
|
<img class="graylogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
|
||||||
|
<p><code>img.graylogo</code></p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="bg-blue">
|
||||||
|
<a href="" title="Block Link = .blink">
|
||||||
|
<div>
|
||||||
|
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
|
||||||
|
<p><code>img.whitelogo</code></p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<!--.wrap = container 1200px -->
|
||||||
|
<div class="wrap">
|
||||||
|
<blockquote class="wall">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</blockquote>
|
||||||
|
<hr>
|
||||||
|
<p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="grid vertical-align">
|
||||||
|
<div class="column">
|
||||||
|
<h2>Devices</h2>
|
||||||
|
<ul class="flexblock specs">
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<svg class="fa-wifi">
|
||||||
|
<use xlink:href="#fa-wifi"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>Ultra-Fast WiFi</h2>
|
||||||
|
Simple and secure file sharing.
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<svg class="fa-battery-full">
|
||||||
|
<use xlink:href="#fa-battery-full"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>All day battery life</h2>
|
||||||
|
Your battery worries may be over.
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div>
|
||||||
|
<svg class="fa-life-ring">
|
||||||
|
<use xlink:href="#fa-life-ring"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>Lifetime Warranty </h2>
|
||||||
|
We'll fix it or if we can't, we'll replace it.
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- end .column-->
|
||||||
|
<div class="column">
|
||||||
|
<figure>
|
||||||
|
<img class="aligncenter" src="../static/images/iphone.png" alt="iPhone">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<!-- end .column-->
|
||||||
|
</div>
|
||||||
|
<!-- end .grid-->
|
||||||
|
</div>
|
||||||
|
<!-- end .wrap-->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="content-left">
|
||||||
|
<figure class="browser">
|
||||||
|
<img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<!-- .end .content-left -->
|
||||||
|
<div class="content-left">
|
||||||
|
<h2>Screenshots</h2>
|
||||||
|
<p>HTML/CSS Browser.</p>
|
||||||
|
<pre><figure class="browser">
|
||||||
|
<img alt="Screenshot" src="image.png">
|
||||||
|
</figure></pre>
|
||||||
|
</div>
|
||||||
|
<!-- .end .content-left -->
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="bg-blue">
|
||||||
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
|
||||||
|
<div class="wrap aligncenter">
|
||||||
|
<h2>
|
||||||
|
Videos
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-60">
|
||||||
|
<h3>Background Videos</h3>
|
||||||
|
<pre><video class="background-video" autoplay muted loop poster="image.jpg">
|
||||||
|
<source src="video.mp4" type="video/mp4">
|
||||||
|
</video></pre>
|
||||||
|
<p><code>.background-video</code></p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="bg-blue aligncenter">
|
||||||
|
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
|
||||||
|
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
<div class="wrap">
|
||||||
|
<h2><strong>Be Awesome</strong></h2>
|
||||||
|
<p>Overlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="bg-black aligncenter">
|
||||||
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/b_xciWkK8Pc/1600x800')"></span>
|
||||||
|
<div class="wrap">
|
||||||
|
<h3>YouTube Videos</h3>
|
||||||
|
<p>Fullscreen, no controls, autoplay, loop, mute...</p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="content-left">
|
||||||
|
<h3>Responsive Videos</h3>
|
||||||
|
<pre><div class="embed">
|
||||||
|
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||||||
|
</iframe>
|
||||||
|
</div></pre>
|
||||||
|
<p><code>.embed</code></p>
|
||||||
|
</div>
|
||||||
|
<!-- end .content-left -->
|
||||||
|
<div class="content-left">
|
||||||
|
<!-- <div class="embed"> = Responsive -->
|
||||||
|
<div class="embed">
|
||||||
|
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<!-- end .embed -->
|
||||||
|
</div>
|
||||||
|
<!-- end .content-left -->
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-60">
|
||||||
|
<!-- Responsive video/iframe... Add <div class="embed"> -->
|
||||||
|
<div class="embed">
|
||||||
|
<iframe width="800" height="450" src="https://www.youtube.com/embed/_m67JbGjWnc?list=PL27Ptt5XwkS39IrY8SeNaELghs_NLjMEs" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<!-- .end .embed -->
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-60">
|
||||||
|
<h3>Fullscreen video</h3>
|
||||||
|
<p>Method 1:</p>
|
||||||
|
<pre><section class="fullscreen">
|
||||||
|
<div class="embed">
|
||||||
|
<iframe class="background-video" src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</pre>
|
||||||
|
<p><code>.fullscreen + .embed + iframe.background-video</code></p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="fullscreen">
|
||||||
|
<!-- Fullscreen Video -->
|
||||||
|
<div class="embed">
|
||||||
|
<iframe width="800" height="450" src="https://www.youtube.com/embed/BzMLA8YIgG0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<!-- .end .embed -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-60">
|
||||||
|
<h3>Fullscreen video (no controls)</h3>
|
||||||
|
<p>Method 1:</p>
|
||||||
|
<pre><div class="embed">
|
||||||
|
<iframe class="background-video" src="https://www.youtube.com/embed/F-UO9vMS7AI">
|
||||||
|
</iframe>
|
||||||
|
</div></pre>
|
||||||
|
<p><code>.embed + iframe.background-video</code></p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-60">
|
||||||
|
<h3>Fullscreen video (no controls)</h3>
|
||||||
|
<p>Method 2:</p>
|
||||||
|
<pre><div class="embed">
|
||||||
|
<iframe src="https://www.youtube.com/embed/F-UO9vMS7AI<strong>?controls=0&showinfo=0</strong>">
|
||||||
|
</iframe>
|
||||||
|
</div></pre>
|
||||||
|
<p><code>.embed</code></p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="fullscreen">
|
||||||
|
<!-- Fullscreen Video -->
|
||||||
|
<div class="embed">
|
||||||
|
<iframe width="800" height="450" src="https://www.youtube.com/embed/F-UO9vMS7AI?controls=0&showinfo=0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<!-- .end .embed -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-60">
|
||||||
|
<h3>Video (autoplay)</h3>
|
||||||
|
<pre><div class="embed">
|
||||||
|
<iframe src="https://www.youtube.com/embed/F-UO9vMS7AI<strong>?autoplay=1</strong>">
|
||||||
|
</iframe>
|
||||||
|
</div></pre>
|
||||||
|
<p><code>.embed</code></p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="fullscreen">
|
||||||
|
<!-- Fullscreen Video -->
|
||||||
|
<div class="embed">
|
||||||
|
<iframe width="800" height="450" src="https://www.youtube.com/embed/F-UO9vMS7AI?controls=0&showinfo=0&autoplay=1" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<!-- .end .embed -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-60">
|
||||||
|
<h3>Video (loop)</h3>
|
||||||
|
<pre><div class="embed">
|
||||||
|
<iframe src="https://www.youtube.com/embed/F-UO9vMS7AI<strong>?loop=1</strong>">
|
||||||
|
</iframe>
|
||||||
|
</div></pre>
|
||||||
|
<p><code>.embed</code></p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="fullscreen">
|
||||||
|
<!-- Fullscreen Video -->
|
||||||
|
<div class="embed">
|
||||||
|
<iframe width="800" height="450" src="https://www.youtube.com/embed/F-UO9vMS7AI?controls=0&showinfo=0&loop=1" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<!-- .end .embed -->
|
||||||
|
</section>
|
||||||
|
<section class="bg-primary">
|
||||||
|
<span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
|
||||||
|
<div class="wrap aligncenter">
|
||||||
|
<h3>
|
||||||
|
<svg class="fa-map">
|
||||||
|
<use xlink:href="#fa-map"></use>
|
||||||
|
</svg>
|
||||||
|
Maps & Charts
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="fullscreen frame">
|
||||||
|
<div class="embed">
|
||||||
|
<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="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<!-- .end .embed -->
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="bg-black-blue frame">
|
||||||
|
<div class="wrap size-50">
|
||||||
|
<p class="text-context">Status of Net Neutrality around the world.</p>
|
||||||
|
<div class="embed">
|
||||||
|
<iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<!-- .end .embed -->
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap size-60">
|
||||||
|
<h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
|
||||||
|
<!-- Responsive video/iframe/chart... Add <div class="embed"> -->
|
||||||
|
<div class="embed">
|
||||||
|
<!-- I love Quartz's charts -->
|
||||||
|
<div class="atlas-chart" data-id="H1tz4P9G" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_H1tz4P9G.png" style="max-width: 100%;"></div>
|
||||||
|
<script src="https://www.theatlas.com/javascripts/atlas.js"></script>
|
||||||
|
</div>
|
||||||
|
<!-- end .embed -->
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
<section class="aligncenter">
|
||||||
|
<!-- .wrap = container 1200px -->
|
||||||
|
<div class="wrap">
|
||||||
|
<h2><strong>Start in Seconds</strong> </h2>
|
||||||
|
<p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
|
||||||
|
<p>
|
||||||
|
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
|
||||||
|
<svg class="fa-cloud-download">
|
||||||
|
<use xlink:href="#fa-cloud-download"></use>
|
||||||
|
</svg>
|
||||||
|
Free Download
|
||||||
|
</a>
|
||||||
|
<span class="try">
|
||||||
|
<a href="https://www.paypal.me/jlantunez/8" title="Good karma :)">
|
||||||
|
<svg class="fa-paypal">
|
||||||
|
<use xlink:href="#fa-paypal"></use>
|
||||||
|
</svg>
|
||||||
|
Pay what you want.
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<!--main-->
|
||||||
|
|
||||||
|
<!-- Required -->
|
||||||
|
<script src="../static/js/webslides.js"></script>
|
||||||
|
<script>
|
||||||
|
window.ws = new WebSlides();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user