HTML - Replace a div (image and button) with a video (only when i press the button)

StackOverflow https://stackoverflow.com/questions/23427507

  •  14-07-2023
  •  | 
  •  

Question

I have an image and a button, like this:

<div id="center">
<img src="Images/img_menu/BOU.png" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" width="60" height="60" id="playButton" onclick=playVideo()></button>
</div>

And i want to replace that image and button with a video. I dont want the video to appear until i press the button play. How can i do that?

Thanks

Was it helpful?

Solution 

<!DOCTYPE HTML>
<html>
<head>
    <title>Hide Image button and show video</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#playButton').click( function () {
                $('#center').hide();
                $('#video-player-div').show();
            });
        });
    </script>

</head>
<body>

<div id="center">
<img src="Images/img_menu/BOU.png" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" width="60" height="60" id="playButton"/>
</div>

<div id="video-player-div" style="display:none;">Your video goes here</div>

</body>
</html>

OTHER TIPS

var btn = document.getElementById('playButton');
var img = document.getElementById('img');

function playVideo()
{
img.style.display = 'none';
video.style.display = 'block';
}

btn.addEventListener('click', playVideo, false);

I think i found the solution:

HTML:

<div id="centerside">
            <img src="Images/img_menu/BOU.png" id="img" width="100" height="100">
            </br>
            <input type="image" src="Images/img_menu/play_btn.png" id="btn" width="60" height="60" id="playButton" onclick=playVideo()></input>

            <div id="showVideoDiv" style="display:none;">
                <video id="myMovie" width="600" height="480">
                    <source src="Images/vid_menu/GOT_S4_E3.mp4">
                </video>
            </div>

        </div>

JAVASCRIPT

function doFirst(){

    var btn = document.getElementById('playButton');
    var img = document.getElementById('img');

    var showVideoDiv = document.getElementById('showVideoDiv');
    var myMovie = document.getElementById('myMovie');

    var centerside = document.getElementById("centerside");

    btn.addEventListener('click', playVideo, false);
}

function playVideo(){
    img.style.display = 'none';
    btn.style.display = 'none';

    showVideoDiv.style.display = 'block';
    myMovie.play();

    centerside.style.paddingTop="0px";
}

window.addEventListener('load',doFirst,false);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top