CODEWITHSUNDEEP
javascriptjqueryhtmlcssyoutube
Retros
Retros

Reputation: 3611

Youtube Video Overlay?

So I've been trying to figure out how to overlay a hero image with a youtube video when you click on the play link(so the video fills the div's height and width). But I have no idea how to do this. I've tried using popup plugins, but I don't think they're the solution. I'm trying to accomplish what these guys have on their website: https://www.squarespace.com/ But because I'm a noob, I was unable to read what they did.

What should I do? Overlay a youtube video with a div, or? Do I need jQuery, too? Someone, help!

Thank you!

EDIT: I've tried using Magnific Popup. But I couldn't make it work. Anyway, here's what I've tried:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<a class="video" href="https://www.youtube.com/watch?v=LGZaWik2430">Click To View</a>

$('.video').magnificPopup({
  type: 'iframe',


  iframe: {
     markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
              '</div>'
  },
  callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }
  }


});

Upvotes: 1

Views: 1351

Answers (2)

Sank6
Sank6

Reputation: 497

You could insert your video into a modal using W3 Schools. Instead of a modal button, you could use an image. Here is what I got:

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn"><img src="IMAGE URL" height="50px" width="50px" alt="YOUR IMAGE"></button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Your Video Here</p>
  </div>

</div>

Upvotes: 1

Riyaz
Riyaz

Reputation: 95

Firstly the positions of the video, dimensions, even the hover animate and the background image, overlay button etc can all be done using CSS. I don't see a need to use javascript for this.

As for the video playback, that can also be fit to the size of the background image using CSS and you can set the playback options as needed.

Upvotes: 1

Related Questions