CODEWITHSUNDEEP
javascripthtmlcss
Michelle Ashwini
Michelle Ashwini

Reputation: 918

Play video on webpage like a pop up after clicking image

I need to play a video when the play button is clicked. But I need this video to play on the same page with the background faded out. The video needs to be displayed like a pop up video. I'm having problems getting the video to come up as a pop up when the image is clicked. I need it to be something like this when I click the watch a video. How can I go about doing this?

<div class="col-md-12 f-play-video">
    <a href="https://youtu.be/7pvci1hwAx8"><img class="play-button" src="http://www.clipartbest.com/cliparts/bcy/Egx/bcyEgxxzi.png"></a>
</div>


.f-play-video{
text-align: center;
margin-top: 80px;
}

.play-button{
width:50px;
}

https://jsfiddle.net/4dd4ze53/3/

Upvotes: 2

Views: 10129

Answers (3)

Michelle Ashwini
Michelle Ashwini

Reputation: 918

Following @ilmk, @A.Lau and @coskikoz, I managed to get the pop up working using bootstrap modal. This is my working code. 

<div class="col-md-12 f-play-video" data-toggle="modal" data-target="#myModal">
    <img src="images/play-video.svg">
</div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Video</h4>
            </div>

            <div class="modal-body">
                    <iframe width="100%" height="360" src="<iframe width="560" height="315" src="https://www.youtube.com/embed/7pvci1hwAx8?rel=0&amp;controls=0" "frameborder="0" allowfullscreen autoplay></iframe>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Upvotes: 1

HansDev
HansDev

Reputation: 80

The example you have uses an onclick function to create a model at the end of the document and an overlay element at the top of the body, then appends the text in the model and replaces the video link.

 onclick="return playYoutube("Achieve more everyday in your work and your daily life", this.href);"

Upvotes: 0

coskukoz
coskukoz

Reputation: 332

I guess The Modal Box will solve your problem. Just insert your video code into the box.

<head>
<style>

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

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

.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>

<button id="myBtn">Click here for video!</button>

<div id="myModal" class="modal">

<div class="modal-content">
<span class="close">×</span>
<p align="center">INSERT YOUR VIDEO HERE!</p>
</div>

</div>

<script>

var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
modal.style.display = "block";
}

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>

Upvotes: 1

Related Questions