mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-30 08:21:15 +02:00
updating demos
This commit is contained in:
José Luis Antúnez
committed by
GitHub
GitHub
parent
c8e2e02830
commit
da783659d7
226
demos/media.html
226
demos/media.html
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- CLEAN MARKUP = GOOD KARMA.
|
||||
Hi source code lover,
|
||||
|
||||
@@ -12,6 +13,7 @@
|
||||
|
||||
Thanks!
|
||||
-->
|
||||
|
||||
<!-- SEO -->
|
||||
<title>WebSlides Tutorial: Videos, Images, and Maps</title>
|
||||
<meta name="description" content="How to embed images, videos, and maps in your presentation.">
|
||||
@@ -106,7 +108,7 @@
|
||||
</nav>
|
||||
</header>
|
||||
<main role="main">
|
||||
<article id="webslides" class="vertical">
|
||||
<article id="webslides">
|
||||
|
||||
<!-- Quick Guide
|
||||
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
||||
@@ -157,14 +159,15 @@
|
||||
<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=16">Background Videos (hosted)</a></li>
|
||||
<li><a target="_blank" href="#slide=18">Embed YouTube videos</a></li>
|
||||
<li><a target="_blank" href="#slide=20">Fullscreen YouTube videos</a></li>
|
||||
<li>
|
||||
<a target="_blank" href="#slide=18"><strong>YouTube Videos</strong></a>
|
||||
<a target="_blank" href="#slide=22"><strong>YouTube API:</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>
|
||||
<li><a target="_blank" href="#slide=23">Autoplay, loop, mute, and no controls</a></li>
|
||||
<li><a target="_blank" href="#slide=25">Fullscreen video</a></li>
|
||||
<li><a target="_blank" href="#slide=27">Background video with overlay</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
@@ -175,7 +178,7 @@
|
||||
<div>
|
||||
<h3><a target="_blank" href="#slide=30">Maps & Charts</a></h3>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=31">Embedding Maps</a></li>
|
||||
<li><a target="_blank" href="#slide=31">Embedding maps</a></li>
|
||||
<li><a target="_blank" href="#slide=32">Fullscreen maps</a></li>
|
||||
<li><a target="_blank" href="#slide=33">Embedding charts</a></li>
|
||||
</ol>
|
||||
@@ -227,14 +230,14 @@
|
||||
<svg class="fa-camera">
|
||||
<use xlink:href="#fa-camera"></use>
|
||||
</svg>
|
||||
img.background = Fullscreen Backgrounds
|
||||
.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>
|
||||
<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">
|
||||
@@ -392,7 +395,7 @@
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<blockquote class="text-quote">
|
||||
<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>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>
|
||||
@@ -459,7 +462,7 @@
|
||||
<h2>Screenshots</h2>
|
||||
<p>HTML/CSS Browser.</p>
|
||||
<pre><figure class="browser">
|
||||
<img alt="Screenshot" src="image.png">
|
||||
<img alt="Screenshot" src="image.jpg">
|
||||
</figure></pre>
|
||||
</div>
|
||||
<!-- .end .content-left -->
|
||||
@@ -495,23 +498,16 @@
|
||||
</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>
|
||||
<p>Just copy and paste the code from YouTube to your slide.</p>
|
||||
<pre><div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||||
</iframe>
|
||||
<strong><iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||||
</iframe></strong>
|
||||
</div></pre>
|
||||
<p><code>.embed</code></p>
|
||||
<p><code>.embed</code> (responsive)</p>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
@@ -529,7 +525,7 @@
|
||||
<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>
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</div>
|
||||
@@ -537,93 +533,138 @@
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3>Fullscreen video</h3>
|
||||
<p>Method 1:</p>
|
||||
<pre><section class="fullscreen">
|
||||
<h3>Fullscreen YouTube Video</h3>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<iframe class="background-video" src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||||
<iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
|
||||
</iframe>
|
||||
</div>
|
||||
</section>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p><code>.fullscreen + .embed + iframe.background-video</code></p>
|
||||
<p><code>.fullscreen</code> > <code>.embed</code> (responsive)</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>
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/iY05U7GaU5I" 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>
|
||||
<section class="frame">
|
||||
<p class="aligncenter"><svg class="fa-thumbs-up large">
|
||||
<use xlink:href="#fa-thumbs-up"></use>
|
||||
</svg></p>
|
||||
<div class="wrap size-60 bg-white">
|
||||
<h3><a href="https://developers.google.com/youtube"><svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg> YouTube API</a></h3>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3>Fullscreen video (no controls)</h3>
|
||||
<p>Method 2:</p>
|
||||
<div class="wrap">
|
||||
<h3><svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg>YouTube API Parameters</h3>
|
||||
<p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
|
||||
<hr>
|
||||
<div class="grid">
|
||||
<div class="column">
|
||||
<pre><div class="embed">
|
||||
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
|
||||
</div></strong>
|
||||
</div></pre>
|
||||
<p>autoplay + loop</p>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
<div class="column">
|
||||
<pre><div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/F-UO9vMS7AI<strong>?controls=0&showinfo=0</strong>">
|
||||
</iframe>
|
||||
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
|
||||
</div></strong>
|
||||
</div></pre>
|
||||
<p><code>.embed</code></p>
|
||||
<p>autoplay + mute + no controls.</p>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
</div>
|
||||
<!-- .end .grid -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>YouTube API</h3>
|
||||
<p><code>autoplay + loop</code></p>
|
||||
<pre><div class="embed">
|
||||
<div data-youtube data-youtube-id="_m67JbGjWnc" <strong>data-autoplay data-loop</strong>>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
<!-- <div class="embed"> = Responsive -->
|
||||
<div class="embed">
|
||||
<div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-70">
|
||||
<h3><strong>Let's make some magic with the YouTube API</strong></h3>
|
||||
<p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
|
||||
<hr>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<div data-youtube data-youtube-id="dmkwb2KfLW8" <strong>data-autoplay data-loop data-no-controls</strong></div>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p>The video will automatically play when the slide is loaded.</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 data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
|
||||
</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 class="wrap size-70">
|
||||
<h3><strong>Fullscreen YouTube video background</strong></h3>
|
||||
<p>Overlaying a transparent background on an embedded Youtube video:</p>
|
||||
<hr>
|
||||
<pre><strong><section class="fullscreen bg-black"></strong>
|
||||
<div class="embed dark">
|
||||
<div data-youtube data-youtube-id="c9psfOxJysw" <strong>data-autoplay data-loop data-mute data-no-controls</strong></div>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen">
|
||||
<section class="fullscreen bg-blue">
|
||||
<!-- 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 class="embed dark">
|
||||
<div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
|
||||
</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 class="wrap aligncenter">
|
||||
<h2><strong>Overlay</strong></h2>
|
||||
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</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">
|
||||
@@ -632,7 +673,7 @@
|
||||
<use xlink:href="#fa-map"></use>
|
||||
</svg>
|
||||
Maps & Charts
|
||||
</h3>
|
||||
</h3>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
@@ -648,11 +689,9 @@
|
||||
</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>
|
||||
<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" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
@@ -660,37 +699,12 @@
|
||||
<!-- 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 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><script src="https://www.theatlas.com/javascripts/atlas.js"></script>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter">
|
||||
<!-- .wrap = container (width: 90%) -->
|
||||
<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-->
|
||||
|
||||
Reference in New Issue
Block a user