javascript - How to overlay a youtube video over your website - Stack Overflow

admin管理员组

文章数量:1024954

Hello I am trying to figure out how to do the follow

1.Click an image on a page

2.This will overlay a youtube video on top of your current page

3.Clicking any transparent part of the screen will return user back to said page

I have added a screenshot to help illustrate my scenario. Thank you for the help in advance, this is for a side project I am working on!! I guess I need more reputation before attaching an image so I have added a jing screenshot.

Hello I am trying to figure out how to do the follow

1.Click an image on a page

2.This will overlay a youtube video on top of your current page

3.Clicking any transparent part of the screen will return user back to said page

I have added a screenshot to help illustrate my scenario. Thank you for the help in advance, this is for a side project I am working on!! I guess I need more reputation before attaching an image so I have added a jing screenshot. http://screencast./t/ceBkx8K1Cy7

• javascript
• css
• html
• youtube

Share Improve this question Follow asked Feb 28, 2015 at 5:39 John EngelhartJohn Engelhart 2111 silver badge22 bronze badges 1

• Try out: VideoBox-Lightbox – user3189338 Commented Feb 28, 2015 at 5:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Here's a pretty simple method that I think does what you require without needing a plugin. You can play around with the video size and location, but the logic won't change. When the video is displayed, clicking on the 'TEST' button won't trigger the default event (and alert) - rather, is is the same as the entire area outside the video. Once the video is hidden, the TEST link will work correctly. Please use the 'full screen' option when running the snippet.

If you want to stop the video playing when you hide the div, you need to load the iframe dynamically as part of the button click function, and then set the div html to '' when hiding it.

$('#btn').click(function() {
  $('#video, #overlay').fadeIn('slow');
  $('#video-container').html('<iframe width=560 height=315 src=https://www.youtube./embed/OMOga8x6aLk frameborder=0 allowfullscreen></iframe>');
});

$(document).on('touchend, mouseup', function(e) {
  if (!$('#video').is(e.target)) {
    $('#video, #overlay').fadeOut('slow');
    $('#video-container').html('');
  }
});

$('#btn2').click(function() {
  alert('video is not visible');
});

#container {
  width: 600px;
  height: 600px;
  border: 2px solid #888888;
  position: relative;
  text-align: center;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: #ffffff;
  opacity: 0.6;
  display: none;
}
#video {
  display: none;
  position: absolute;
  top: 15%;
  left: 10%;
  width: 80%;
  z-index: 2;
}
#video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
#video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="btn">CLICK ME</button>
  <br>
  <br>
  <button id="btn2">TEST</button>

  <div id="overlay"></div>

  <div id="video">
    <div id="video-container"></div>
  </div>
</div>

EDIT: For some reason the Youtube video won't play in the SO sandbox, and I don't have time now to figure out why. Here's a FIDDLE where it's fine (same code).

EDIT 2: Updated code to provide for responsive size/position for video container.

EDIT 3: Added support for touchend event.

Hello I am trying to figure out how to do the follow

1.Click an image on a page

2.This will overlay a youtube video on top of your current page

3.Clicking any transparent part of the screen will return user back to said page

I have added a screenshot to help illustrate my scenario. Thank you for the help in advance, this is for a side project I am working on!! I guess I need more reputation before attaching an image so I have added a jing screenshot.

Hello I am trying to figure out how to do the follow

1.Click an image on a page

2.This will overlay a youtube video on top of your current page

3.Clicking any transparent part of the screen will return user back to said page

I have added a screenshot to help illustrate my scenario. Thank you for the help in advance, this is for a side project I am working on!! I guess I need more reputation before attaching an image so I have added a jing screenshot. http://screencast./t/ceBkx8K1Cy7

• javascript
• css
• html
• youtube

Share Improve this question Follow asked Feb 28, 2015 at 5:39 John EngelhartJohn Engelhart 2111 silver badge22 bronze badges 1

• Try out: VideoBox-Lightbox – user3189338 Commented Feb 28, 2015 at 5:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Here's a pretty simple method that I think does what you require without needing a plugin. You can play around with the video size and location, but the logic won't change. When the video is displayed, clicking on the 'TEST' button won't trigger the default event (and alert) - rather, is is the same as the entire area outside the video. Once the video is hidden, the TEST link will work correctly. Please use the 'full screen' option when running the snippet.

If you want to stop the video playing when you hide the div, you need to load the iframe dynamically as part of the button click function, and then set the div html to '' when hiding it.

$('#btn').click(function() {
  $('#video, #overlay').fadeIn('slow');
  $('#video-container').html('<iframe width=560 height=315 src=https://www.youtube./embed/OMOga8x6aLk frameborder=0 allowfullscreen></iframe>');
});

$(document).on('touchend, mouseup', function(e) {
  if (!$('#video').is(e.target)) {
    $('#video, #overlay').fadeOut('slow');
    $('#video-container').html('');
  }
});

$('#btn2').click(function() {
  alert('video is not visible');
});

#container {
  width: 600px;
  height: 600px;
  border: 2px solid #888888;
  position: relative;
  text-align: center;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: #ffffff;
  opacity: 0.6;
  display: none;
}
#video {
  display: none;
  position: absolute;
  top: 15%;
  left: 10%;
  width: 80%;
  z-index: 2;
}
#video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
#video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="btn">CLICK ME</button>
  <br>
  <br>
  <button id="btn2">TEST</button>

  <div id="overlay"></div>

  <div id="video">
    <div id="video-container"></div>
  </div>
</div>

EDIT: For some reason the Youtube video won't play in the SO sandbox, and I don't have time now to figure out why. Here's a FIDDLE where it's fine (same code).

EDIT 2: Updated code to provide for responsive size/position for video container.

EDIT 3: Added support for touchend event.

本文标签： javascriptHow to overlay a youtube video over your websiteStack Overflow