mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-16 01:54:53 +02:00
Code Issues Releases Wiki Activity

updating demos

Browse Source 
autoplay feature, background video with overlay...
This commit is contained in:
José Luis Antúnez
2017-04-04 11:58:43 +02:00
committed by GitHub
parent 33c409eb61
commit ae273d05fc
3 changed files with 233 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
demos/components.html
View File

@@ -2776,23 +2776,31 @@
</section>
<section>
<div class="wrap size-60">
<h3>Background Videos</h3>
<pre>&lt;video class="background-video" autoplay muted loop poster="image.jpg"&gt;
&lt;source src="video.mp4" type="video/mp4"&gt;
&lt;/video&gt;</pre>
<p><code>.background-video</code></p>
<h3>Background videos</h3>
<pre><strong>&lt;section class="fullscreen"&gt;</strong>
&lt;div class="embed"&gt;
&lt;video autoplay loop poster="image.jpg"&gt;
&lt;source src="video.mp4" type="video/mp4"&gt;
&lt;/video&gt;
&lt;/div&gt;
<strong>&lt;/section&gt;</strong>
</pre>
<p>.fullscreen > .embed (responsive) > video</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">
<section class="fullscreen bg-blue aligncenter">
<div class="embed dark">
<video 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 -->
<!-- .end .embed -->
<div class="wrap">
<h2><strong>Muted</strong></h2>
<p>Overlay: <code>section.fullscreen.bg-blue > embed.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/MDGpwpMY2Ws/')"></span>