- Add normal YouTube links on your page:
<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU">Link title</a>
<a class="youtube" href="http://www.youtube.com/embed/4eYSpIz2FjU">Link Title</a>
<a class="youtube" href="http://youtu.be/4eYSpIz2FjU"><img src="..." /></a>
-
OR, use
<button> element with YouTube id in rel attribute:
<button class="youtube" rel="4eYSpIz2FjU">Click me</button>
-
OR, use
<img> element with YouTube id in rel attribute:
<img class="youtube" rel="4eYSpIz2FjU" src="..." />
-
OR, use
<img> element with YouTube id in rel attribute and thumbnail from YouTube:
<img class="youtube" rel="4eYSpIz2FjU" src="http://img.youtube.com/vi/4eYSpIz2FjU/1.jpg" />
- And finally, initialize the Plugin on page load:
<script type="text/javascript">
$(function () {
$(".youtube").YouTubeModal({autoplay:0, width:640, height:480});
});
</script>
- Configure the plugin using options listed below.