We Keep Coding

Add video to page on Button click

I am a beginner JS user, and I am trying to get a video to play on fullscreen and replace an invisible div further down on the page. I started with a guide from Chris Ferdinandi.
In his guide, the video replaces the image that is clicked. I would like to have the div later down on the page to be replaced on the click.
Any guidance would be great!
HTML
<a data-video="480459339" class="stylsheetref" href="#" target="">Watch the Tour</a>
<div id="video-replace"></div>
Javascript (modified from this guide)
<script>
if (!Element.prototype.requestFullscreen) {
Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}
// Listen for clicks
document.addEventListener('click', function (event) {
//Set invisible Div (new code added by me)
var videonew = '#video-replace');
// Check if clicked element is a video link
var videoId = event.target.getAttribute('data-video');
if (!videoId) return;
// Create iframe
var iframe = document.createElement('div');
iframe.innerHTML = '<p>x</p><iframe width="560" height="960" src="https://player.vimeo.com/video/' + videoId + '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
var video = iframe.childNodes[1];
// Replace the image with the video
event.target.parentNode.replaceChild(video, videonew);
// Enter fullscreen mode
video.requestFullscreen();
}, false);
</script>

There are problems in your code.
var videonew = '#video-replace'); there's an orphan ), since you are using this in the `replaceChild``method I assume you want the variable to reference to an element.
So change it to
var videonew = document.querySelector('#video-replace');
Pro tip: Using the Developer console during development can help you figure out such errors in your code.

Set video embedded in page to autoplay or not, based on query string?

Is it possible to set a video embedded on a page to autoplay based on a query string on the URL of the page it's embedded on?
For instance, if I have a page at bla-blah.web/interthingy.html with a Vimeo embed, is it possible to make it so bla-blah.web/interthingy.html?play or bla-blah.web/interthingy.html?play=true so that the Vimeo embed contained within that page autoplays?
Basically something that reads the URL, and sets the embedded video to autoplay based on whether it has a specific query string.
My apologies if this has been asked and answered elsewhere; I can't seem to find anything on it.

A solution can be based on the window.location.search.
Using the split and filter it's possible to search the query parameter play and its value.
If this parameter exists and the value is not specified or true it's possible to play the Vimeo video:
var playParams = window.location.search.split('&').filter(function(ele, index) {
var tmpArr = ele.split('=');
if (tmpArr[0] == '?play' || tmpArr[0] == 'play') {
if (tmpArr.length == 2) {
return tmpArr[1] == 'true';
}
return true;
}
});
if (playParams.length > 0) {
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.play();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Get parent of clicked tag inside of iframe

I've an iframe that contain an HTML page.Now I want to get class of the parent item that clicked.
this is my ifram:
<iframe src="//example.com" id="frame" ></iframe>
this is css:
#frame{ width:380px; height:420px;}
this is my script:
$(document).ready(function() {
var iframe = document.getElementById('frame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document.body;
$(innerDoc).on('click', function(e) {
var thisID = ((e.target).id);
alert(thisID);
alert(innerDoc.getElementById(thisID));
$(thisID).click(function() {
var Allclassnames = $(thisID).parent();
console.log(Allclassnames);
});
});
});
but it return the item was clicked only.how to fix it?
Demo:DEMO
NOTE:these are in a same domain.maybe below DEMO not worked for this reason.but I'm sure that my HTML is inside of the same domain with my web site.
thank you.

Add sandbox attributes to the iframe
<iframe src="/example.html" id="frame" sandbox="allow-scripts allow-same-origin"></iframe>
Change the script to
<script>
$('#frame').load(function() {
$('#frame').contents().on('click', function(e) {
var thisID = ((e.target).id);
alert(thisID);
alert($('#'+thisID,this));
$('#'+thisID,this).click(function() {
var Allclassnames = $(this).parent();
console.log(Allclassnames);
});
});
});
</script>
Make sure that every element in frame doc. have some id or else the alert() may throw an error.
To see the console message of iframe you need to change the scope from the scope dropdown , it's in console tab besides the filter icon in the chrome developer tools.

You cannot interact with the contents of an iframe unless it is on the same domain as the parent document.
See:
https://en.wikipedia.org/wiki/Same-origin_policy

How do you stop onload from repeating

I have the following code to replace the src of the iframe to have a random video each time the page is loaded. However the page just keeps loading and keeps running the function. How do I stop the function for repeating.
<div id="rightsugg"><iframe id="randomVideo" width="560" height="315" src="" onLoad="displayRandomVideo();" frameborder="0" allowfullscreen></iframe></div>
<script type="text/javascript">
function getRandomVideo() {
var videos = [
'https://www.youtube.com/embed/kiTO7c_qeZs',
'https://www.youtube.com/embed/z4Hfv00eqoI',
'https://www.youtube.com/embed/7cdZYQB5ONE',
'https://www.youtube.com/embed/i1gE3nyQnKg',
];
var video = videos[Math.floor(Math.random()*videos.length)];
return video;
}
function displayRandomVideo() {
var htmlVideo = document.getElementById("randomVideo");
htmlVideo.src = getRandomVideo();
}
displayRandomVideo();
</script>

Just unregister the onLoad event after the videa has been displayed.
function displayRandomVideo() {
var htmlVideo = document.getElementById("randomVideo");
htmlVideo.src = getRandomVideo();
htmlVideo.onload=null;
}
jsfiddle

Why are you using onload event of the iframe in the first place?
$(window).load(displayRandomVideo);
would do it, and just remove the onload attribute in the <iframe> tag.

Rendering Youtube Video in a WYSIWYG

I am creating a custom WYSIWYG from scratch using JavaScript. All of it is working fine (like inserting pictures), but when I click on submit and the content gets added to my database, the YouTube video gets inserted like this:
<div><br></div><div><br><div><br></div></div>
I have created a JavaScript file that the WYSIWYG parses to:
function iImage(){
var imgSrc = prompt('Enter image location', '');
if (imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
function submit_form(){
var theForm = document.getElementById("blogForm");
theForm.elements["blogbody"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
You can see that my iImage function works, but not my iVideo.
Can anyone help?
Just to let you know i have edited my script to this...
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("http://www.youtube.com/watch?v=", "http://www.youtube.com/embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390"></iframe>';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
but still no joy

I have got it. This is the code below
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe title="YouTube video player" src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if(embed != null){
richTextField.document.execCommand("Inserthtml", false, embed);`
}
}
It working on my sites right now.

Ultimate
The reason you don't see a Youtube.com is because it will be added by you upon uploading. In the form where you write content you intend to upload to your site, You are to click on a Add Video link which will tricker off the first line in the code to popup a window requesting you to submit your Youtube video link, which looks something like http://youtube.com/theVideoLink. The link you add will then be placed where you have src="'+urlReplace+'" that is.

Well, I am a begginner at javascript, but I don't see anywhere were it adds youtube.com to it, all I see is the watch?v=.
As I said, a beginners opinion.

Are you able to first try a hardcoded/static version like below first?
- might be just syntax or one of your variables not set.
<script type="text/javascript">
function iVideo(){
var youtubeiframe='<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/AsbagZvkrbo" frameborder="0"></iframe>';
richTextField.document.execCommand ("insertHTML", false, youtubeiframe);
}
</script>