Osclass forums

Support forums => General help => Topic started by: urmitnick on July 07, 2019, 11:16:27 pm

Title: item-post open video link in lightbox
Post by: urmitnick on July 07, 2019, 11:16:27 pm

Hello everyone,

I've inserted  a link to a "how to" page in my item-post page this way

Code: [Select]

<a href="<?php echo osc_esc_html('index.php?page=page&id=23')?>" target = "_blank" ><i class="fa fa-info-circle" style="font-size: 20px;"aria-hidden="true"></i> <?php echo '&nbsp;&nbsp;'  ?> <?php  _e('howto', 'sakela'); ?></a>

But I would like to replace the page by a youtube video that will open in a lightbox.

Any idea to how to make this works?

Regards

Title: Re: item-post open video link in lightbox
Post by: WEBmods on July 08, 2019, 01:59:07 pm

Hello!

Code stolen from https://codepen.io/darcyvoutt/pen/MaamWg/

1. Add this to your theme CSS file:

Code: [Select]

.lightbox {
  background-color: rgba(0, 0, 0, 0.8);
  overflow: scroll;
  position: fixed;
  display: none;
  z-index: 1;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
.lightbox-container {
  position: relative;
  max-width: 960px;
  margin: 7% auto;
  display: block;
  padding: 0 3%;
  height: auto;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .lightbox-container {
    margin-top: 10%;
  }
}
@media screen and (max-width: 414px) {
  .lightbox-container {
    margin-top: 13%;
  }
}
.lightbox-content {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.lightbox-close {
  text-transform: uppercase;
  background: transparent;
  position: absolute;
  font-weight: 300;
  font-size: 12px;
  display: block;
  border: none;
  color: white;
  top: -22px;
  right: 3%;
}
.video-container {
  padding-bottom: 56.25%;
  position: relative;
  padding-top: 30px;
  overflow: hidden;
  height: 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

2. Add this to your functions.php file (bottom, before ?>):

Code: [Select]

function wm_footer_lightbox_js() {
?>
<script>
// Function to reveal lightbox and adding YouTube autoplay
function revealVideo(div,video_id) {
  var video = document.getElementById(video_id).src;
  document.getElementById(video_id).src = video+'&autoplay=1'; // adding autoplay to the URL
  document.getElementById(div).style.display = 'block';
}

// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div,video_id) {
  var video = document.getElementById(video_id).src;
  var cleaned = video.replace('&autoplay=1',''); // removing autoplay form url
  document.getElementById(video_id).src = cleaned;
  document.getElementById(div).style.display = 'none';
}
</script>
<?php
}
osc_add_hook('footer', 'wm_footer_lightbox_js');

3. Paste this where you want your video button to appear:

Code: [Select]

<button id="playme" onclick="revealVideo('video','youtube')">Play Video</button>
<div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
  <div class="lightbox-container"> 
    <div class="lightbox-content">
      <button onclick="hideVideo('video','youtube')" class="lightbox-close">Close | ✕</button>
      <div class="video-container">
        <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/WsptdUFthWI?showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

Note: replace https://www.youtube.com/embed/WsptdUFthWI with your video URL.

Regards.