Skip to content

Instantly share code, notes, and snippets.

@mikong

mikong/video-test.html

Last active April 24, 2017 02:21
Show Gist options
  • Save mikong/96cf6f6eec5f1d779043f83acb33aa35 to your computer and use it in GitHub Desktop.
Save mikong/96cf6f6eec5f1d779043f83acb33aa35 to your computer and use it in GitHub Desktop.
Download ZIP
YouTube videos on your page
Raw
video-test.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video Testing</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
.media {
margin-top: 30px;
text-align: center;
}
div.center-video {
margin: 0 auto;
display: block;
width: 640px;
height: 480px;
text-align: center;
}
div.center-video a {
display: block;
width: 100%;
height: 100%;
background-image: "";
}
div.center-video button {
margin-top: -23px;
position: relative;
top: 50%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
// Guardians: wUn05hdkhjM
// Sink: zwZkhCP9QRY
$(document).ready(function() {
var youtube = $('.center-video');
youtube.click(function() {
var iframe = '<iframe width="640" height="480" src="https://www.youtube.com/embed/zwZkhCP9QRY?rel=0&showinfo=0&autoplay=1" frameborder="0" allowfullscreen></iframe>';
youtube.html('');
youtube.attr('style', '');
youtube.append(iframe);
});
});
</script>
</head>
<body>
<div class="container-fluid">
<h1>Embedded IFrame</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id nunc nibh. Aenean varius dui vel interdum finibus. Etiam maximus ante arcu. Proin ut aliquam sem. Curabitur scelerisque ante vitae elit bibendum posuere. Nunc congue est et tellus dignissim facilisis. Fusce dapibus laoreet efficitur. Praesent at consectetur nibh. Vivamus mi ex, semper id felis vitae, laoreet auctor turpis. Suspendisse magna massa, tempor vel condimentum a, malesuada quis lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non laoreet augue, non eleifend dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam volutpat convallis malesuada. Cras id sapien tortor. Donec quis nisi et urna tempor fringilla sollicitudin sit amet est.<p>
<div class="media">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zwZkhCP9QRY?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<h1>Load IFrame on Click</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id nunc nibh. Aenean varius dui vel interdum finibus. Etiam maximus ante arcu. Proin ut aliquam sem. Curabitur scelerisque ante vitae elit bibendum posuere. Nunc congue est et tellus dignissim facilisis. Fusce dapibus laoreet efficitur. Praesent at consectetur nibh. Vivamus mi ex, semper id felis vitae, laoreet auctor turpis. Suspendisse magna massa, tempor vel condimentum a, malesuada quis lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non laoreet augue, non eleifend dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam volutpat convallis malesuada. Cras id sapien tortor. Donec quis nisi et urna tempor fringilla sollicitudin sit amet est.<p>
<div class="media">
<div class="center-video" style="background: url(http://img.youtube.com/vi/zwZkhCP9QRY/sddefault.jpg) no-repeat center top;">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-play"></span>
</button>
</div>
</div>
<h3>Reference:</h3>
<ul>
<li><a href="https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743">Tuts+ Tutorial</a></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment