From 5694444c5e995db773d8ded6327ee3cd44b198a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Tue, 4 Apr 2017 16:45:34 +0200 Subject: [PATCH] updating demos: youtube api examples, bg video... --- demos/classes.html | 8 ++++---- demos/components.html | 11 ++++++----- demos/keynote.html | 32 +++++++++++++++++++------------- demos/landings.html | 33 +++++++++++++++++++-------------- demos/media.html | 16 ++++++++-------- demos/portfolios.html | 30 ++++++++++++++++++------------ 6 files changed, 74 insertions(+), 56 deletions(-) diff --git a/demos/classes.html b/demos/classes.html index afb40ab..b62444f 100644 --- a/demos/classes.html +++ b/demos/classes.html @@ -767,10 +767,10 @@

Fullscreen Background Images

<section>
-	<span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
-	<section>
-		<h1>Slide</h1>
-	</section>
+  <span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
 </section>

How to embed Unsplash photos?

diff --git a/demos/components.html b/demos/components.html index 154750b..87e1a1a 100644 --- a/demos/components.html +++ b/demos/components.html @@ -2813,12 +2813,13 @@
-

Responsive Videos

+

YouTube API

+

Embed videos with loop, autoplay, and muted attributes.

<div class="embed">
  <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>
-

.embed

+

.embed (responsive)

@@ -2836,7 +2837,7 @@
- +
@@ -3013,7 +3014,7 @@

Screenshots

HTML/CSS Browser.

<figure class="browser">
-	<img alt="Screenshot" src="image.png">
+  <img alt="Screenshot" src="image.png">
 </figure>
@@ -3031,7 +3032,7 @@ </div> </section> </article> -

Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.

+

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

diff --git a/demos/keynote.html b/demos/keynote.html index 1860444..de83040 100644 --- a/demos/keynote.html +++ b/demos/keynote.html @@ -722,7 +722,7 @@ </div> </section> </article> -

Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.

+

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

@@ -736,17 +736,18 @@
-

Responsive Videos

+

YouTube API

+

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

<div class="embed">
  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay ></div>
 </div>
-

.embed

+

.embed (responsive)

-
+
@@ -757,26 +758,31 @@
-
+
-
-
@@ -1808,12 +1808,13 @@
-

Responsive Videos

+

YouTube API

+

Embed videos with loop, autoplay, and muted attributes.

<div class="embed">
  <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>
-

.embed

+

.embed (responsive)

@@ -1831,7 +1832,7 @@
- +
@@ -1840,28 +1841,32 @@
- +
-
- +
+
+ +

Every end is a new beginning

-
- +
+
+ +

Overlay

-

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

+

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

diff --git a/demos/media.html b/demos/media.html index 5417a96..bc33922 100644 --- a/demos/media.html +++ b/demos/media.html @@ -341,10 +341,10 @@

Opacity

[class*="bg-"] > .background.light

<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>
+  <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
 </section>
@@ -354,10 +354,10 @@

Opacity

[class*="bg-"] > .background.dark

<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>
+  <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
 </section>
diff --git a/demos/portfolios.html b/demos/portfolios.html index 6957b27..f4705c3 100644 --- a/demos/portfolios.html +++ b/demos/portfolios.html @@ -1618,7 +1618,7 @@ </div> </section> </article> -

Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.

+

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

@@ -1719,12 +1719,13 @@
-

Responsive Videos

+

YouTube API

+

Embed videos with loop, autoplay, and muted attributes.

<div class="embed">
  <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>
-

.embed

+

.embed (responsive)

@@ -1742,7 +1743,7 @@
- +
@@ -1751,28 +1752,33 @@
- +
-
-