mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-26 14:34:27 +02:00
Code Issues Releases Wiki Activity

updating demos: youtube api examples, bg video...

Browse Source
This commit is contained in:
José Luis Antúnez
2017-04-04 16:45:34 +02:00
committed by GitHub
parent 99ddf85cc0
commit 5694444c5e
6 changed files with 74 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demos/classes.html
View File

@@ -767,10 +767,10 @@
<div class="content-left"> <div class="content-left">
<h3>Fullscreen Background Images</h3> <h3>Fullscreen Background Images</h3>
<pre>&lt;section&gt; <pre>&lt;section&gt;
&lt;span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt; &lt;span <strong>class="background"</strong> style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt;
&lt;section&gt; &lt;div class="wrap"&gt;
&lt;h1&gt;Slide&lt;/h1&gt; &lt;h1&gt;Slide&lt;/h1&gt;
&lt;/section&gt; &lt;/div&gt;
&lt;/section&gt;</pre> &lt;/section&gt;</pre>
<p>How to <a href="https://source.unsplash.com/">embed Unsplash photos</a>?</p> <p>How to <a href="https://source.unsplash.com/">embed Unsplash photos</a>?</p>
</div> </div>

9
demos/components.html
View File

@@ -2813,12 +2813,13 @@
<section> <section>
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
<p>Embed videos with loop, autoplay, and muted attributes.</p>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code> (responsive)</p>
</div> </div>
<!-- end .content-left --> <!-- end .content-left -->
<div class="content-left"> <div class="content-left">
@@ -2836,7 +2837,7 @@
<div class="wrap size-60"> <div class="wrap size-60">
<!-- Responsive video/iframe... Add <div class="embed"> --> <!-- Responsive video/iframe... Add <div class="embed"> -->
<div class="embed"> <div class="embed">
<iframe width="800" height="450" src="https://www.youtube.com/embed/_m67JbGjWnc?list=PL27Ptt5XwkS39IrY8SeNaELghs_NLjMEs" allowfullscreen></iframe> <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
@@ -3031,7 +3032,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&gt;</pre> &lt;/article&gt;</pre>
<p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p> <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>

26
demos/keynote.html
View File

@@ -722,7 +722,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&gt;</pre> &lt;/article&gt;</pre>
<p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p> <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
@@ -736,17 +736,18 @@
<section class="bg-apple"> <section class="bg-apple">
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
<p>Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.</p>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay &gt;&lt;/div&gt; &lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay &gt;&lt;/div&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code> (responsive)</p>
</div> </div>
<!-- end .content-left --> <!-- end .content-left -->
<div class="content-left"> <div class="content-left">
<!-- <div class="embed"> = Responsive --> <!-- <div class="embed"> = Responsive -->
<div class="embed"> <div class="embed">
<div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay></div> <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-no-controls></div>
</div> </div>
<!-- end .embed --> <!-- end .embed -->
</div> </div>
@@ -757,26 +758,31 @@
<section class="bg-apple fullscreen"> <section class="bg-apple fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
<div class="embed"> <div class="embed">
<div data-youtube data-youtube-id="F-UO9vMS7AI" data-autoplay></div> <div data-youtube data-youtube-id="lvOKBQvbLhg" data-autoplay></div>
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</section> </section>
<section class="bg-black aligncenter"> <section class="fullscreen bg-apple aligncenter">
<video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <div class="embed">
<video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
</div><!-- .embed -->
<!-- .wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2><strong>Be Awesome</strong></h2> <h2><strong>Be Awesome</strong></h2>
</div> </div>
</section> </section>
<section class="bg-black aligncenter"> <section class="fullscreen bg-black aligncenter">
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <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"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
</div><!-- .embed -->
<!-- .wrap = container (width: 90%) --> <!-- .wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2><strong>Think Different</strong></h2> <h2><strong>Think Different</strong></h2>
<p>0verlay: <code>.bg-black > .background-video.dark</code> or .light</p> <p>Overlay: <code>fullscreen.bg-black > .embed.dark</code> or .light</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>

25
demos/landings.html
View File

@@ -1736,7 +1736,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&gt;</pre> &lt;/article&gt;</pre>
<p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p> <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
@@ -1808,12 +1808,13 @@
<section> <section>
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
<p>Embed videos with loop, autoplay, and muted attributes.</p>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code> (responsive)</p>
</div> </div>
<!-- end .content-left --> <!-- end .content-left -->
<div class="content-left"> <div class="content-left">
@@ -1831,7 +1832,7 @@
<div class="wrap size-60"> <div class="wrap size-60">
<!-- Responsive video/iframe... Add <div class="embed"> --> <!-- Responsive video/iframe... Add <div class="embed"> -->
<div class="embed"> <div class="embed">
<iframe width="800" height="450" src="https://www.youtube.com/embed/vXeF6Uot8pk?list=PL27Ptt5XwkS3YU7n0p7Qer2j_DhTSi0jW" allowfullscreen></iframe> <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
@@ -1840,28 +1841,32 @@
<section class="fullscreen"> <section class="fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
<div class="embed"> <div class="embed">
<iframe width="800" height="450" src="https://www.youtube.com/embed/b4LrTkWq9jU" allowfullscreen></iframe> <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</section> </section>
<section class="bg-black aligncenter"> <section class="fullscreen bg-black aligncenter">
<video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <div class="embed">
<video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
</div><!-- .end .embed -->
<!-- .wrap = container (width: 90%) --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Every end is a new beginning</strong></h2> <h2><strong>Every end is a new beginning</strong></h2>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-blue aligncenter"> <section class="fullscreen bg-blue aligncenter">
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <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"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
</div><!-- .end .embed -->
<!-- .wrap = container (width: 90%) --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Overlay</strong></h2> <h2><strong>Overlay</strong></h2>
<p><code>section.bg-blue > .background-video.dark</code> or .light</p> <p><code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>

26
demos/portfolios.html
View File

@@ -1618,7 +1618,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&gt;</pre> &lt;/article&gt;</pre>
<p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p> <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
@@ -1719,12 +1719,13 @@
<section> <section>
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
<p>Embed videos with loop, autoplay, and muted attributes.</p>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code> (responsive)</p>
</div> </div>
<!-- end .content-left --> <!-- end .content-left -->
<div class="content-left"> <div class="content-left">
@@ -1742,7 +1743,7 @@
<div class="wrap size-60"> <div class="wrap size-60">
<!-- Responsive video/iframe... Add <div class="embed"> --> <!-- Responsive video/iframe... Add <div class="embed"> -->
<div class="embed"> <div class="embed">
<iframe width="800" height="450" src="https://www.youtube.com/embed/vXeF6Uot8pk?list=PL27Ptt5XwkS3YU7n0p7Qer2j_DhTSi0jW" allowfullscreen></iframe> <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
@@ -1751,28 +1752,33 @@
<section class="fullscreen"> <section class="fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
<div class="embed"> <div class="embed">
<iframe width="800" height="450" src="https://www.youtube.com/embed/b4LrTkWq9jU" allowfullscreen></iframe> <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</section> </section>
<section class="bg-black aligncenter"> <section class="fullscreen bg-black aligncenter">
<video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <div class="embed">
<video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
</div><!-- .end .embed -->
<!-- .wrap = container (width: 90%) --> <!-- .wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2><strong>We build brands with integrity and substance</strong></h2> <h2><strong>We build brands with integrity and substance</strong></h2>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-blue"> <section class="fullscreen bg-blue">
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <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"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
</div>
<!-- .embed -->
<!-- .wrap = container (width: 90%) --> <!-- .wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2><strong>We help with design direction</strong></h2> <h2><strong>We help with design direction</strong></h2>
<p>0verlay: <code>section.bg-blue > .background-video.dark</code> or .light</p> <p>0verlay: <code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>