Skip to content

Instantly share code, notes, and snippets.

@jnilla

jnilla/index.html

Created June 10, 2018 07:59
Show Gist options
  • Save jnilla/c0f1b79953fdb6838d9204cd832957a5 to your computer and use it in GitHub Desktop.
Save jnilla/c0f1b79953fdb6838d9204cd832957a5 to your computer and use it in GitHub Desktop.
Download ZIP
jn-play // source http://jsbin.com/nacilip
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>jn-play</title>
<style id="jsbin-css">
body {
padding: 30px;
background: #ccc;
}
/*--------------*/
.jn-play {
position: relative;
overflow: hidden;
}
.jn-play .jn-play-poster {
cursor: pointer;
display: block;
width: 100%;
transform: scale(1);
transition: 1s;
}
.jn-play .jn-play-action {
cursor: pointer;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
opacity: 0.7;
transform: scale(1);
transition: 1s;
}
.jn-play:hover .jn-play-poster {
opacity: 1;
transform: scale(1.1);
}
.jn-play:hover .jn-play-action {
transform: scale(1.3);
}
.jn-play iframe {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.jn-play-modal {
border: 1px solid #ccc;
border-radius: 0;
}
.jn-play-modal .modal-body {
padding: 0;
overflow: hidden;
border-radius: 5px;
}
.jn-play-close {
display: table-cell;
position: absolute;
top: -11px;
right: -11px;
z-index: 10;
box-sizing: border-box;
width: 22px;
height: 22px;
text-align: center;
padding: 1px;
background-color: #ccc;
border-radius: 24px;
cursor: pointer;
font-family: arial;
}
</style>
</head>
<body>
<h1>Jnilla Play - v1.0.0</h1>
<p>Display a video poster with a play button and load iframe based video players on demand. </p>
<h2>Demo</h2>
<p>data-modal="true"</p>
<div class="jn-play" data-modal="true">
<img class="jn-play-poster" src="https://img.youtube.com/vi/C0DPdy98e4c/hqdefault.jpg">
<img class="jn-play-action" src="data:image/png;base64,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
">
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<p>default</p>
<div class="jn-play">
<img class="jn-play-poster" src="https://img.youtube.com/vi/C0DPdy98e4c/hqdefault.jpg">
<img class="jn-play-action" src="data:image/png;base64,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
">
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<script id="jsbin-javascript">
//--------------------------------------
// Jnilla Play v1.1.0
//--------------------------------------
(function($){
$(document).ready(function(){
// -------------------------
// Init
// -------------------------
if(!$('.jn-play').length) return;
var modal;
var modalBody;
modal = $('<div class="jn-play-modal modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div type="button" class="jn-play-close" data-dismiss="modal" aria-hidden="true">×</div><div class="modal-body"></div></div>');
modalBody = modal.find('.modal-body');
// -------------------------
// Events
// -------------------------
// play button click
$('.jn-play').click(function(){
var jnPlay = $(this).clone();
var iframe;
if($(this).data('modal')){
iframe = jnPlay.find('iframe').eq(0);
modalBody.append(jnPlay);
iframe.attr('src', iframe.data('src'));
iframe.fadeIn('slow');
modal.modal('show');
}else{
iframe = $(this).find('iframe').eq(0);
iframe.attr('src', iframe.data('src'));
iframe.fadeIn('slow');
}
});
// modal hiden
modal.on('hidden', function(){
modalBody.html('');
});
});
})(jQuery);
</script>
<script id="jsbin-source-css" type="text/css">body {
padding: 30px;
background: #ccc;
}
/*--------------*/
.jn-play {
position: relative;
overflow: hidden;
}
.jn-play .jn-play-poster {
cursor: pointer;
display: block;
width: 100%;
transform: scale(1);
transition: 1s;
}
.jn-play .jn-play-action {
cursor: pointer;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
opacity: 0.7;
transform: scale(1);
transition: 1s;
}
.jn-play:hover .jn-play-poster {
opacity: 1;
transform: scale(1.1);
}
.jn-play:hover .jn-play-action {
transform: scale(1.3);
}
.jn-play iframe {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.jn-play-modal {
border: 1px solid #ccc;
border-radius: 0;
}
.jn-play-modal .modal-body {
padding: 0;
overflow: hidden;
border-radius: 5px;
}
.jn-play-close {
display: table-cell;
position: absolute;
top: -11px;
right: -11px;
z-index: 10;
box-sizing: border-box;
width: 22px;
height: 22px;
text-align: center;
padding: 1px;
background-color: #ccc;
border-radius: 24px;
cursor: pointer;
font-family: arial;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">//--------------------------------------
// Jnilla Play v1.1.0
//--------------------------------------
(function($){
$(document).ready(function(){
// -------------------------
// Init
// -------------------------
if(!$('.jn-play').length) return;
var modal;
var modalBody;
modal = $('<div class="jn-play-modal modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div type="button" class="jn-play-close" data-dismiss="modal" aria-hidden="true">×</div><div class="modal-body"></div></div>');
modalBody = modal.find('.modal-body');
// -------------------------
// Events
// -------------------------
// play button click
$('.jn-play').click(function(){
var jnPlay = $(this).clone();
var iframe;
if($(this).data('modal')){
iframe = jnPlay.find('iframe').eq(0);
modalBody.append(jnPlay);
iframe.attr('src', iframe.data('src'));
iframe.fadeIn('slow');
modal.modal('show');
}else{
iframe = $(this).find('iframe').eq(0);
iframe.attr('src', iframe.data('src'));
iframe.fadeIn('slow');
}
});
// modal hiden
modal.on('hidden', function(){
modalBody.html('');
});
});
})(jQuery);
</script></body>
</html>
Raw
jsbin.nacilip.css
body {
padding: 30px;
background: #ccc;
}
/*--------------*/
.jn-play {
position: relative;
overflow: hidden;
}
.jn-play .jn-play-poster {
cursor: pointer;
display: block;
width: 100%;
transform: scale(1);
transition: 1s;
}
.jn-play .jn-play-action {
cursor: pointer;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
opacity: 0.7;
transform: scale(1);
transition: 1s;
}
.jn-play:hover .jn-play-poster {
opacity: 1;
transform: scale(1.1);
}
.jn-play:hover .jn-play-action {
transform: scale(1.3);
}
.jn-play iframe {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.jn-play-modal {
border: 1px solid #ccc;
border-radius: 0;
}
.jn-play-modal .modal-body {
padding: 0;
overflow: hidden;
border-radius: 5px;
}
.jn-play-close {
display: table-cell;
position: absolute;
top: -11px;
right: -11px;
z-index: 10;
box-sizing: border-box;
width: 22px;
height: 22px;
text-align: center;
padding: 1px;
background-color: #ccc;
border-radius: 24px;
cursor: pointer;
font-family: arial;
}
Raw
jsbin.nacilip.js
//--------------------------------------
// Jnilla Play v1.1.0
//--------------------------------------
(function($){
$(document).ready(function(){
// -------------------------
// Init
// -------------------------
if(!$('.jn-play').length) return;
var modal;
var modalBody;
modal = $('<div class="jn-play-modal modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div type="button" class="jn-play-close" data-dismiss="modal" aria-hidden="true">×</div><div class="modal-body"></div></div>');
modalBody = modal.find('.modal-body');
// -------------------------
// Events
// -------------------------
// play button click
$('.jn-play').click(function(){
var jnPlay = $(this).clone();
var iframe;
if($(this).data('modal')){
iframe = jnPlay.find('iframe').eq(0);
modalBody.append(jnPlay);
iframe.attr('src', iframe.data('src'));
iframe.fadeIn('slow');
modal.modal('show');
}else{
iframe = $(this).find('iframe').eq(0);
iframe.attr('src', iframe.data('src'));
iframe.fadeIn('slow');
}
});
// modal hiden
modal.on('hidden', function(){
modalBody.html('');
});
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment