javascript - creating div and image overlay over a video that hides on click -


i need this. http://jsfiddle.net/2faxv/1/ second div #hideshould on top left of screen margin. can't figure out. also, once image clicked on youtube video shrinks default size.is there way fix it's size in same code without using <iframe>

html

<div class="vid">     <img id="hide" src="http://img.youtube.com/vi/z7jgy9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/z7jgy9zezj4?autoplay=1" />     <div id="hide1">         <h3>johnny depp<br><span>acting technique</span></h3>     </div> </div>

css

.vid { width: 350px; height: 298px; float: left; margin: 20px 25px 70px 70px; background-size: cover; background-position: 0px -50px; background-repeat: none; } .vid div {  overflow: hidden;  height: 298px;  width: 300px;  background-color: rgba(255, 255, 255, 0.32);   }  .vid div h3 {  position: absolute;  color: black;  font-family: 'montserrat', sans-serif;  font-size: 30px;  font-weight: bold;  padding: 10px;  background-color: rgba(255,255,255,0.8);  margin-left: 30px;  max-width: 450px;  }  .vid div h3 span {  color: black;  text-align: center;  width: 300px;  font-family: 'source sans pro', sans-serif;  font-style: italic;  font-weight: 400;  font-size: 19px;  }

function

$('#hide').click(function() {     video = '<iframe src="' + $(this).attr('data-video') + '"></iframe>';     $(this).replacewith(video);     $('#hide1').hide(); });

as sizing problem, i'd suggest:

$('img').click(function () {     // creating <iframe> element:     var video = $('<iframe />', {          // setting properties,         // this.dataset.video returns         // value of 'data-video' attribute:         'src': this.dataset.video,              // retrieves height/width:             'height': this.clientheight,             'width': this.clientwidth     });     $(this).replacewith(video); });

js fiddle demo.

the positioning can solved, depending on want element positioned, using position: absolute on element position (the #hide1 element, position: relative on parent .vid element):

.vid {     /* other (unchanged) styles omitted brevity */     position: relative; } .vid div {     /* other (unchanged) styles removed brevity */     position: absolute;     top: 10%;     left: 10%; } /* minor changes follow,    tidying up/aesthetics;    irrelevant 'positioning'    aspect */

js fiddle demo.

references:


Comments

Post a Comment