CSS Codes
CSS Layouts

<html>

<head>
<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="ddvideooutro.css" />

<script class="test" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="ddvideooutro.js">
/***********************************************
* YouTube/ Vimeo Video Outro Script - (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

<script>

$(function(){ // on DOM load

$('#youtubediv').ddvideooutro() // initialize outro on Youtube video container

$('#vimeodiv').ddvideooutro({bottomgap:50}) // initialize outro on Vimeo video container
})

</script>
</head>

<body>

<!--Fluid Youtube video example (max width 640px) -->
<div style="max-width:640px">
<div id="youtubediv" class="videowrapper fluid">
<iframe type="text/html" width="640" height="390" src="https://www.youtube.com/embed/bZuzfTQZ4TA?rel=0&autoplay=1&enablejsapi=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>

<br />

<!--Explicit dimensions Vimeo video example -->
<div id="vimeodiv" class="videowrapper" style="width:640px;height:368px">
<iframe type="text/html" width="640" height="368" src="https://player.vimeo.com/video/182169177?portrait=0&title=0&byline=0&badge=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>


<div id="outrotemplate" style="display:none">
<h1>Like What You See?</h1>
<p>Visit <a href="http://dynamicdrive.com/">Dynamic Drive</a> for more free JavaScript and CSS scripts, or <a href="http://twitter.com/ddrivegeorge">follow us</a> on Twitter!</p>
<p>Video Credits: <a href="http://www.menupatterns.com">Menu Patterns</a></p>
<div class="ddclosebutton">x</div>
</div>
</ul>
</body>
</html>