I am using this PHP Database Ajax code by W3Schools.com
This is my code, inside the PHP File (as shown in w3schools). It is working in this snippet. Also working, when i use this in the HTML file (as shown in w3schools).
But when, i use this code in the PHP File, it is not working. What could possibly go wrong?
.playtrailer {
background-color:#f2f2f2;
color:red;
font-weight:600;
border:none;
padding:10px 12px;
}
.playtrailer:hover {
cursor:pointer;
background-color:#e2e2e2;
}
#trailerdivbox {
display:none;
width:100%;
height:100%;
position:fixed;
top:0%;overflow:auto;
background-color:rgb(0, 0, 0);
background-color:rgba(0, 0, 0, 0.4);
}
.videoWrapper {
position:relative;
padding-bottom:56.25%;
padding-top:25px;
margin:auto;
height:0;top:100px;
}
.videoWrapper iframe {
position:absolute;
max-width:560px;
max-height:315px;
width:95%;
height:95%;
left:0;
right:0;
margin:auto;
} <button id="playtrailer" class="playtrailer" data-src="naQr0uTrH_s"> Play Trailer ► </button>
<button id="playtrailer" class="playtrailer" data-src="naaQr0uTrH_s"> Play Trailer ► </button>
<!-- Watch Video Pop-up box -->
<div id='close'>
<div id='trailerdivbox'>
<div class='videoWrapper'>
<iframe id='video' class='trailervideo' width='560' height='315' data-src='https://www.youtube.com/embed/' src='about:blank' frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Script to open Pop-up box when someone click on watch video button -->
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.querySelectorAll('.playtrailer')
function playVideo(src) {
var video = document.getElementById('video');
video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.forEach(function(a){
a.onclick = function() {
modal.style.display = "block";
playVideo(this.dataset.src); // pass the src
}
})
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
</script>Edit: This is my HTML file (Copy/pasted from w3schools)
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
This is my PHP file (getuser.php)
<!DOCTYPE html>
<html>
<head>
<style>
.playtrailer {
background-color:#f2f2f2;
color:red;
font-weight:600;
border:none;
padding:10px 12px;
}
.playtrailer:hover {
cursor:pointer;
background-color:#e2e2e2;
}
#trailerdivbox {
display:none;
width:100%;
height:100%;
position:fixed;
top:0%;overflow:auto;
background-color:rgb(0, 0, 0);
background-color:rgba(0, 0, 0, 0.4);
}
.videoWrapper {
position:relative;
padding-bottom:56.25%;
padding-top:25px;
margin:auto;
height:0;top:100px;
}
.videoWrapper iframe {
position:absolute;
max-width:560px;
max-height:315px;
width:95%;
height:95%;
left:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<button id="playtrailer" class="playtrailer" data-src="naQr0uTrH_s"> Play Trailer ► </button>
<button id="playtrailer" class="playtrailer" data-src="naaQr0uTrH_s"> Play Trailer ► </button>
<!-- Watch Video Pop-up box -->
<div id='close'>
<div id='trailerdivbox'>
<div class='videoWrapper'>
<iframe id='video' class='trailervideo' width='560' height='315' data-src='https://www.youtube.com/embed/' src='about:blank' frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Script to open Pop-up box when someone click on watch video button -->
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.querySelectorAll('.playtrailer')
function playVideo(src) {
var video = document.getElementById('video');
video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.forEach(function(a){
a.onclick = function() {
modal.style.display = "block";
playVideo(this.dataset.src); // pass the src
}
})
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
</script>
</body>
</html>
</div>
