img2iframe

by japaneselanguagefriend

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div class="video">
<div class="playbutton">Play</div>    
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
    </div>
    <div class="tube"></div>
    <div class="close">Close X</div>

CSS

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.playbutton{
    position:absolute;
    font-size:90px;
    cursor:pointer;
    color:red;
}
.close{
    display:none;
}
}

JavaScript

$('.playbutton,img').click(function(){
            var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>';
            $('.video').hide();
         $('.tube').html(video);
         $('.close').show();
        });
 $('.close').click(function(){
            $('.video').show();
       $('.tube').empty();
     $('.close').hide();
        });