This is my code and the main thing I wanted to accomplish when creating this was to: overlay an iFrame over an image and also to see if I could embed a YouTube video iFrame with the video ID entered through a form. This is what I came up with.
function changeChannel() {
var out = document.getElementById("vid");
var inp = document.getElementById("form");
var base = "https://www.youtube.com/embed/";
var params = "?autoplay=1&loop=1&controls=0&showinfo=0&rel=0&disablekb=1";
if (inp.value.length > 11) {
alert("Nice HTML Attribute editing! But honestly, why even try?");
out.src = base + "kffacxfA7G4" + params;
}
else {
out.src = base + inp.value + params;
}
}#bg {
background-image: url(https://i.imgur.com/CexLZOK.jpg);
width: 900px;
height: 412px;
}
#vid {
border: 0;
position: relative;
left: 233px;
top: 56px;
width: 81px;
height: 66px;
pointer-events: none;
}<!DOCTYPE HTML>
<html>
<head>
<title>What's Osama Bin Watchin'?</title>
<meta charset="utf-8">
</head>
<body>
<h1>What's Osama Bin Watchin'?</h1>
<div id="bg">
<iframe id="vid" src="https://www.youtube.com/embed/kffacxfA7G4?t=4s&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&modestbranding=1&disablekb=1"></iframe>
</div><br>
<input type="text" maxlength="11" placeholder="Put A YouTube Video ID Here" id="form">
<input type="submit" onclick="changeChannel()">
<p>Some commercial or sponsored videos might not work, or it might not work if the video id you entered is invalid...</p>
</body>
</html>I came here to see if anyone has any ideas of something(s) I should change, or could change; after all it is Code Review. I was also wondering why the YouTube Player iFrame does not loop.
UPDATE:
Here is a live link.
Ok, so for anyone else that sees this please DO NOT take this seriously! It was a satirical joke, and honestly, I went here to see if my code was any good at completing the task of displaying an image overlaid on an iFrame. Not to be downvoted because people were too offended to actually take a look at the code and give me some pointers.
