Skip to content

Instantly share code, notes, and snippets.

@mikong mikong/video-test.html
Last active Apr 24, 2017

Embed
What would you like to do?
YouTube videos on your page
<!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
You can’t perform that action at this time.