# Overlay a YouTube video iFrame Over an Image

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 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>
<title>What's Osama Bin Watchin'?</title>
<meta charset="utf-8">
<body>
<h1>What's Osama Bin Watchin'?</h1>
<div id="bg">
</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.

• Is the pun worth the downvotes? If you genuinely want feedback on any/all aspects of your code per the help center, then the bad pun is working against you. If you're trolling... it's also working against you. – Mathieu Guindon Nov 22 '17 at 16:50
• I'm sorry; I'm new to this community! But thanks for the downvotes everybody! It's a real nice way to welcome me here! – Henry7720 Nov 22 '17 at 18:39
• I honestly don't think this question deserves the downvotes, and I would recommend to focus on the code here. I don't see this as a troll attempt but rather an attempt at making something that is supposed to be humorous (it's up to each person to determine) and technically interesting. I have never seen anyone attempt this at Code Review before. I have unfortunately not been able to get it working though, I do see a bunch of error messages in the Chrome console. – Simon Forsberg Nov 22 '17 at 19:06
• The errors appear to be due to the sandbox restrictions on the snippets - if one copies the code to another inline editor like jsfiddle, jsbin, etc. it should work – Sᴀᴍ Onᴇᴌᴀ Nov 22 '17 at 19:50
• Ok, look. This was supposed to be a joke meaning: DO NOT TAKE IT SERIOUSLY. It is satirical; but furthermore it was meant mostly to try and position iFrames overlaid above an image and in this context it made some sense. – Henry7720 Nov 24 '17 at 1:35