Facebook Style YouTube Video Expanding with jQuery

Today I am going to share some awesome tutorial on How to expand YouTube video in Facebook style using jQuery & CSS

JQuery Code

jQuery(".videos .youtube-video a").click(function (){

		var videoID = jQuery(this).attr("href").split("=");

		var videoWidth = parseInt(jQuery(this).parent().parent().css("width"));

		var videoHeight = Math.ceil(videoWidth*(0.56)+1);

                jQuery(this).parent().hide();

		jQuery(this).parent().next().css('margin-left', '0');

		jQuery(this).parent().parent().prepend('<iframe width="'+videoWidth+'" height="'+videoHeight+'" src="http://www.youtube.com/embed/'+(videoID[1])+'?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>');

		return false;

});

Explanation

var videoID = jQuery(this).attr("href").split("=");

The above code is used to get the video ID from youtube Url.

var videoWidth = parseInt(jQuery(this).parent().parent().css("width"));

var videoHeight = Math.ceil(videoWidth*(0.56)+1);

The above code is used to get the width of the parent container of the video. Based on the width we are calculating the video height to maintain the aspect ratio of the video by using simple Math.ceil function

jQuery(this).parent().parent().prepend('<iframe width="'+videoWidth+'" height="'+videoHeight+'" src="http://www.youtube.com/embed/'+(videoID[1])+'?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>');

The above code will prepend the youtube video in the parent container above the video image.

CSS Code

body {

	font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;

}

.videos {

	margin:20px auto;

	width:500px;

	background:#f7f7f7;

	border:1px solid #ccc;

	padding:5px;

	display:block;

}

.videos .youtube-video {

	float:left;

	height:90px;

	width:120px;

	border:solid 1px #dedede;

	padding:5px;

}

.videos .youtube-video img {

	box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);

}

.details {

	margin-left:130px;

	min-height:93px;

	word-wrap:break-word;

    overflow:hidden;

	padding:5px;

	display:block;

}

.videos h6 {

	color:#3B5998;

	padding:0;

	margin:0;

	font-size:11px;

	font-weight:bold;

}

.videos p.link, .videos p.desc {

	color:#999;

	padding:0;

	margin:0;

	font-size:11px;

	padding:3px;

}

HTML Usage

<div class="videos">

  <div class="youtube-video"> <a href="http://www.youtube.com/watch?v=_OBlgSz8sSM"> <img src="http://img.youtube.com/vi/_OBlgSz8sSM/2.jpg" title="Play" alt="Play"/> </a> </div>

  <div class="details">

    <h6>Charlie bit my finger - again !</h6>

    <p class="link">http://www.youtube.com</p>

    <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>

  </div>

</div>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Live Demo