Skip to content

Commit

Permalink
betterify example page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmartsch
jmartsch committed Feb 5, 2020
1 parent 85ae7d7 commit 3181f7a
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 65 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ The ratio of the lazyframe. Possible values: 16:9, 4:3, 1:1
Set this to true if you want the resource to execute (for example video to play) when the element is in view.

## Changelog
* v1.1.901 betterify example page
* v1.1.9 remove gulp and rollup and use webpack instead
* use Babel 7
* add changelog to README
Expand Down
235 changes: 171 additions & 64 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Lazyframe Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/lazyframe.css">
<link rel="stylesheet" href="https://cdn.tailwindcdn.com/1.1.4/tailwind.min.css">
<style>
.container{
max-width: 500px;
margin: 0 auto;
width: 100%;
}

p {
font-family: "Helvetica Neue", Helvetica, Arial;
}

.lazyframe {
margin-bottom: 200px;
}
.lazyframe--custom {
background: #bada55;
display: -webkit-box;
Expand All @@ -32,6 +21,7 @@
-ms-flex-pack: center;
justify-content: center;
}

.lazyframe--custom .lazyframe__title {
position: relative;
width: 100%;
Expand All @@ -40,65 +30,182 @@
font-family: Arial;
color: #fff;
}
.lazyframe--custom::before{

.lazyframe--custom::before {
width: auto;
}
</style>
</head>
<body>
<div class="container">
<p>Youtube video with thumbnail and title from API</p>
<div
class="lazyframe"
data-src="https://www.youtube.com/embed/6hgVihWjK2c"
data-vendor="youtube">
</div>

<p>Youtube video with custom thumbnail and title</p>
<div
class="lazyframe"
data-src="https://www.youtube.com/embed/6hgVihWjK2c"
data-vendor="youtube"
data-title="Custom title"
data-thumbnail="https://placekitten.com/500/281">
</div>

<p>Vimeo video with thumbnail and title from API</p>
<div
class="lazyframe"
data-src="https://vimeo.com/45915667"
data-vendor="vimeo">
</div>

<p>Vimeo video with custom thumbnail and title</p>
<div
class="lazyframe"
data-src="https://vimeo.com/183524061"
data-vendor="vimeo"
data-title="Custom title"
data-thumbnail="https://placekitten.com/500/281">
</div>

<p>Iframe with custom theme and title</p>
<div
class="lazyframe lazyframe--custom"
data-src="https://www.surveymonkey.com/r/?sm=%2bd%2bdWobuoz7irMV%2fpzKPcJmrKosuGWSraJtIrFQ4wBQ%3d"
data-title="Something completely different">
</div>

<p>Google maps iframe with custom thumbnail and title that gets executed when in view</p>
<div
class="lazyframe lazyframe--custom"
data-src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ8fA1bTmyXEYRYm-tjaLruCI&key=AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ"
data-title="Something completely different"
data-initinview="true">
</div>
</div>

<body class="overflow-x-hidden font-sans antialiased text-gray-900 bg-white">

<main>

<!-- start hero section -->
<section class="relative px-4 pt-10 pb-10 text-center bg-blue-500 md:text-center text-white">
<div>
<h1 class="text-5xl font-bold leading-tight">Lazyframe</h1>
<p class="mt-4">Dependency-free library for lazyloading iframes</p>
<p class="mt-4"><a href="https://github.com/vb/lazyframe">https://github.com/vb/lazyframe</a></p>
</div>
</section>
<!-- end hero section -->

<!-- start how it works -->
<section class="px-4 py-16 text-center bg-gray-100">
<h2 class="text-2xl font-bold leading-tight lg:text-3xl">What does it do? It turns blue.</h2>
<p class="mt-5 mt-5 text-2xl text-center">Lazyframe creates a responsive placeholder for embedded content and only
requests it when the user
interacts with
it. This decreases the page load and idle time. Lazyframe comes with brand-like themes for YouTube, Vimeo and
Vine.</p>
<h2 class="text-2xl font-bold leading-tight lg:text-3xl mt-10">Why?</h2>
<p class="mt-5 mt-5 text-2xl text-center">Because the JavaScript loaded from the external providers is big and
takes much time to load. This
slows down your site, even if your visitors don't want to see your beautiful videos.
</p>
<p>For example here are the number of requests and filesizes of some well-known services.</p>
<ul class="list-unstyled mt-10">

<li>
YouTube – 11 requests ≈ 580kb
</li>
<li>
Google maps – 52 requests ≈ 580kb
</li>
<li>
Vimeo – 8 requests ≈ 145kb
</li>
</ul>

</section>
<!-- end how it works -->

<section class="bg-blue-300 p-10 text-center ">
<h2 class="text-2xl font-bold leading-tight lg:text-3xl">Examples</h2>

<div class="mt-8 md:flex">
<div class="w-full bg-white shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6">
<div class="lazyframe" data-src="https://www.youtube.com/watch?v=izDzsFe1o4I" data-vendor="youtube">
</div>
<div class="px-4 py-8">
<h4 class="text-lg font-bold tracking-wide">Embed YouTube video with thumbnail and title from
API
</h4>
<p>This demo only works at https://vb.github.io/lazyframe/, so we have to wait, until this is merged into
the
master repo</p>
</div>
</div>

<div class="w-full bg-white shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6 mt-5 md:mt-0">
<div>
<div class="lazyframe" data-src="https://www.youtube.com/embed/6hgVihWjK2c" data-vendor="youtube"
data-title="Custom title" data-thumbnail="https://placekitten.com/500/281">
</div>

<h4 class="px-4 py-8 text-lg font-bold tracking-wide">Embed YouTube video with custom preview image
and
custom title
</h4>

</div>
</div>
</div>
<div class="mt-8 md:flex">
<div class="w-full bg-white shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6">
<div>
<div class="lazyframe" data-src="https://vimeo.com/45915667" data-vendor="vimeo">
</div>
</div>
<h4 class="px-4 py-8 text-lg font-bold tracking-wide">Embed Vimeo video with thumbnail and title from
API
</h4>
</div>

<div class="w-full bg-white shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6 mt-5 md:mt-0">
<div>
<div class="lazyframe" data-src="https://www.youtube.com/embed/6hgVihWjK2c" data-vendor="youtube"
data-title="Custom title" data-thumbnail="https://placekitten.com/500/281">
</div>
<h4 class="px-4 py-8 text-lg font-bold tracking-wide">Embed Vimeo video with custom thumbnail and
title
</h4>
</div>
</div>
</div>

<div class="mt-8 md:flex">
<div class="w-full bg-white shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6">
<div>
<div class="lazyframe lazyframe--custom"
data-src="https://www.surveymonkey.com/r/?sm=%2bd%2bdWobuoz7irMV%2fpzKPcJmrKosuGWSraJtIrFQ4wBQ%3d"
data-title="Something completely different">
</div>
</div>
<h4 class="px-4 py-8 text-lg font-bold tracking-wide">Custom Iframe
</h4>
</div>

<div class="w-full bg-white shadow-lg sm:w-1/2 sm:mx-2 lg:mx-6 mt-5 md:mt-0">
<div>
<div class="lazyframe lazyframe--custom"
data-src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ8fA1bTmyXEYRYm-tjaLruCI&key=AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ"
data-title="Something completely different" data-initinview="true">
</div>
<div class="px-4 py-8">
<h4 class="text-lg font-bold tracking-wide uppercase">Google maps iframe with custom thumbnail and
title that gets executed when in view
</h4>
<p class="mt-2 text-base text-gray-700">This demo only works at https://vb.github.io/lazyframe/, so we
have
to wait, until this is merged into the
master repo
</p>
</div>
</div>
</div>
</div>
</section>

<!-- start features -->
<section class="flex flex-col px-4 py-12 text-center bg-blue-500 lg:px-16 md:px-8 xl:px-24 xxl:px-40">
<div>
<h2 class="text-2xl font-bold leading-tight text-white lg:text-3xl">Lazyframe is small, beautiful and easy to
apply.
My website loads now much faster. Thank you very much for creating this impressive script!”
</h2>
<p class="mt-4 text-xl font-bold text-white">Random guy</p>
<p class="text-gray-300">on the internet</p>
</div>


</section>
<!-- end features -->

<!-- start cta -->
<section class="px-4 py-12 text-center bg-white lg:px-16 md:px-8 xl:px-24 xxl:px-40">
<div>
<h2 class="text-2xl font-bold lg:text-3xl ">Need Help? Found a bug?</h2>
<p class="w-full mx-auto mt-6 text-base text-gray-700 lg:w-1/2">File an issue on GitHub</p>
<a href="https://github.com/vb/lazyframe/issues"
class="block mt-4 text-xl font-semibold text-blue-500">https://github.com/vb/lazyframe/issues</a>
</div>
</section>
<!-- end cta -->



</main>



<script src="dist/lazyframe.min.js"></script>
<script>
lazyframe('.lazyframe', {
apikey: 'AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ' // Sorry, will only work on this domain
});
</script>
</body>
</html>

</html>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "lazyframe",
"version": "1.1.9",
"version": "1.1.901",
"description": "Dependency-free library for lazyloading iframes",
"main": "dist/lazyframe.min.js",
"jsnext:main": "src/lazyframe.js",
Expand Down

0 comments on commit 3181f7a

Please sign in to comment.