From ae273d05fc494885aabd7a8b01e34e6a32bb13e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Tue, 4 Apr 2017 11:58:43 +0200 Subject: [PATCH] updating demos autoplay feature, background video with overlay... --- demos/components.html | 30 ++++-- demos/keynote.html | 2 +- demos/media.html | 245 ++++++++++++++++++++++++++++++++++++------ 3 files changed, 233 insertions(+), 44 deletions(-) diff --git a/demos/components.html b/demos/components.html index 6b18ef4..154750b 100644 --- a/demos/components.html +++ b/demos/components.html @@ -2776,23 +2776,31 @@
-

Background Videos

- 
<video class="background-video" autoplay muted loop poster="image.jpg">
-  <source src="video.mp4" type="video/mp4">
-</video>
-

.background-video

+

Background videos

+ 
<section class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="image.jpg">
+      <source src="video.mp4" type="video/mp4">
+    </video>
+  </div>
+</section>
+
+

.fullscreen > .embed (responsive) > video

-
-
+
+ +
+
+

.background-(position)

+

.background-left-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
@@ -347,6 +387,70 @@
+
+
+

ul.flexblock.metrics.border

+ +
    +
  • Founded + 2024 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + EBITDA: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +

Transparent Logos

@@ -480,24 +584,55 @@
-

Background Videos

- 
<video class="background-video" autoplay muted loop poster="image.jpg">
-  <source src="video.mp4" type="video/mp4">
-</video>
-

.background-video

+

Background videos

+ 
<section class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="image.jpg">
+      <source src="video.mp4" type="video/mp4">
+    </video>
+  </div>
+</section>
+
+

.fullscreen > .embed (responsive) > video

-
- -
-

Be Awesome

-

Overlay: section.bg-blue > .background-video.dark or .light

+
+
+ +
+
+
+
+

Background videos

+

Transparent overlay:

+ 
<section class="fullscreen bg-blue">
+  <div class="embed dark">
+    <video autoplay muted loop poster="image.jpg">
+      <source src="video.mp4" type="video/mp4">
+    </video>
+  </div>
+</section>
+
+

.fullscreen.bg-blue > .embed.dark (or .light) > video

+
+
+ +
+ +
+

Muted

+

Overlay: section.fullscreen.bg-blue > embed.dark or .light

+
+ +
@@ -548,7 +683,7 @@
- +
@@ -617,6 +752,15 @@
+
+
+

+ + Autoplay Feature

+

Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.

+
+ +

Let's make some magic with the YouTube API

@@ -650,6 +794,7 @@ </div> </section> +

.fullscreen[class*="bg-"] > .embed.dark or .light

@@ -677,7 +822,7 @@
-
+

Status of Net Neutrality around the world.

@@ -687,6 +832,12 @@
+
+
+ +
+ +
@@ -705,6 +856,36 @@
+
+ +
+

Start in seconds

+

120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+
+

Thank you!

+

@WebSlides

+

* * *

+
+