Trying to make a video player with its video being what is after the “?” in the URL.
This is my code in both the iframe page, the video player, and the main page.
player.html, the iframe:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video Player</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script>
function onload() {
window.addEventListener('message', function(event){
acorn = event.data;
console.log("Message received from the parent: " + event.data);
console.log("hi " + acorn);
document.getElementById("vid").setAttribute("src", event.data);
}
);
}
</script>
</head>
<body onload="onload()">
<!-- Video container -->
<div class="video-container">
<img src=
"https://yt3.googleusercontent.com/PyD7VwvJRsHyf0wC-5AxjATC6AhHzKLDlN1UaLM7IvWprWM98K44qNnWLHYJVIUVDC4j_iMU3Q=s176-c-k-c0x00ffffff-no-rj"
id="video-thumbnail">
<video id="video">
<source id="vid" src="null"
type="video/mp4">
</video>
<!-- Controlers continer -->
<div class="controls">
<!-- Left controller div -->
<div class="left">
<button id="skipminus-10">
<i class="fa-solid fa-backward"></i>
</button>
<button id="play-pause">
<i class="fa-solid fa-play"></i>
</button>
<button id="skip-10">
<i class="fa-solid fa-forward"></i>
</button>
</div>
<!-- div for progress bar -->
<div class="video-timer">
<span id="current-time">00:00</span>
<span id="separator">/</span>
<span id="max-duration">00:00</span>
</div>
<div class="playback-line">
<div class="progress-bar"></div>
</div>
<!-- Right controller div -->
<div class="right">
<div class="volume-container">
<div id="mute">
<i class="fas fa-volume-up"></i>
</div>
<input type="range"
id="volume"
min="0"
max="1"
step="0.01"
value="1">
</div>
</div>
</div>
</div>
index.html, the page the user will be viewing:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../../../style.css">
<link rel="shortcut icon" type="image/png" href="../../../images/favicon.png">
<title>Video</title>
</head>
<body onload="load()">
<div class="center">
<font face = "Verdana" size = "4"><a href="../"><button class="button button">Back</button></a></font>
<br>
<br>
<center>
<button id="loadvid" class="butt"><font face = "Verdana" size = "4">Load Video</font></button>
<br>
<iframe src="player.html" scrolling="no" width="960" height="540"></iframe>
</center>
<br>
</div>
<script>
const loadvid = document.getElementById("loadvid");
loadvid.addEventListener("click", function()
{
var VID = window.location.search.substring(1);
const iframe = document.querySelector("iframe");
iframe.contentWindow.postMessage(VID);
console.log("Video is located in: " + VID);
}
);
function load() {
var VID = window.location.search.substring(1);
const iframe = document.querySelector("iframe");
iframe.contentWindow.postMessage(VID);
console.log("Video is located in: " + VID)
}
</script>
</body>
</html>
I would very appreciate it if this gets fixed, I’ve been working on this for 3 days straight, if not, more.