We Keep Coding

How to make a JS code that can change iframe content when reloading the page

I want to make a changable iframe images. I tried lot but cannot find a way to fix my code. Please help me fix my code or if there any other method please let me know.
HTML
<iframe class="img-responsive center-block element-spacing-md" id="banner" width="970" height="250" frameborder="0" scrolling="no" allowfullscreen="true" style="width: 970px; height: 250px;" ></iframe><iframe class="img-responsive center-block element-spacing-md" id="banner" width="970" height="250" frameborder="0" scrolling="no" allowfullscreen="true" style="width: 970px; height: 250px;" ></iframe>
JS
var image = new Array ();
image[0] = '"//s0.2mdn.net/dfp/370694/4408939339/1629903098931/index.html"';
image[1] = '"//s0.2mdn.net/dfp/370694/4823240283/1652207585517/index.html"';
image[2] = '"//s0.2mdn.net/dfp/370694/4823240283/1652207585517/index.html"';
var size = image.length
var x = Math.floor(size*Math.random());
var output='src='+image[x];
console.log(output);
document.getElementById("banner").innerHTML = output;

If anyone need to make a iframe that changes when reloading try this..
Thanks!
html
<iframe class="img-responsive center-block element-spacing-md" id="banner" width="970" height="250" frameborder="0" scrolling="no" allowfullscreen="true" style="width: 970px; height: 250px;" src=></iframe>
js
var image = new Array ();
image[0] = "//s0.2mdn.net/dfp/370694/4408939339/1629903098931/index.html";
image[1] = "//s0.2mdn.net/dfp/370694/4823240283/1652207585517/index.html";
image[2] = "//s0.2mdn.net/dfp/370694/4823240283/1652207585517/index.html";
var size = image.length
var x = Math.floor(size*Math.random())
var output=image[x];
console.log(output)
document.getElementById("banner").src=output;

How can I hide an iframe on click using JavaScript

There is a video playing when the user enters my website and when the video is clicked I would like to hide the iframe and show the menu page. Can someone help me with this?
This is my code:
$(document).ready(function(){
$("#menu-page").hide();
$("#SiteNav").hide();
$("#filecontainer").on("click",function(){
$("#menu-page").show();
$("#SiteNav").show();
$("#filecontainer").hide();
});
});
<div class="box" id="box">
<div class="main-video">
<iframe id="filecontainer" src="https://www.youtube.com/embed/NQokQxdFVqE?autoplay=1&mute=1&playlist=NQokQxdFVqE&loop=1&controls=0&showinfo=0&" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="1920" height="1042" frameborder="0">
</iframe>
</div>
<canvas id="canvas"></canvas>
</div>

You are not going to be able to detect a click in the iframe. You can add a layer over the page and detect that click and hide it that way.
$(".layer").on("click", function () {
$(".layer, #filecontainer").remove();
});
.layer{
position: absolute;
top: 0; left:0; height: 100%; width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
<div class="main-video">
<iframe id="filecontainer" src="https://www.youtube.com/embed/NQokQxdFVqE?autoplay=1&mute=1&playlist=NQokQxdFVqE&loop=1&controls=0&showinfo=0&" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="1920" height="1042" frameborder="0">
</iframe>
</div>
<canvas id="canvas"></canvas>
</div>
<div class="layer"></div>

I want to stop the YouTube video that is played when I press the Next or Previous button on BXSLIDER

I use this script code.
How can I modify my script?
<div class="video-slider">
<div>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/-xmdWsgmeXk?playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/-xmdWsgmeXk?playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/-xmdWsgmeXk?playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<script>
var slider = $(".video-slider").bxSlider({
pager : false
onSlideBefore : function($slideElement, oldIndex, newIndex) {
var src = $slideElement.find("iframe").attr("src");
console.log(src);
$("iframe").attr("src",'').attr("src",src);
}
});
</script>
The video address is for samples. Let me know if there is a good way.

I think you not write proper javascript for bxslider check my code.
<script>
var slider = $(".video-slider").bxSlider({
pager : false,
onSlideBefore : function($slideElement, oldIndex, newIndex) {
var src = $slideElement.find("iframe").attr("src");
console.log(src);
$("iframe").attr("src",'').attr("src",src);
}
});
</script>

Youtube Video Player that plays video in same spot on button click

I am currently working on a project that is a navigation and a video player in the same div container.
https://i.stack.imgur.com/W49lY.png
https://i.stack.imgur.com/s89Oy.png
Once you click on one of the four boxes, another video will pop up and show in that same position.
Which approach should I go with? HTML/JavaScript?
I am totally new to JavaScript, so I know that this code is wrong, but this is what I have so far.
<div class="row" style="margin-left: auto;">
<div>
<button onclick="Word()">Word</button>
<button onclick="Excel()">Excel</button>
<button onclick="PowerPoint()">PowerPoint</button>
<button onclick="OneNote()">OneNote</button>
<br><br>
<video id="word" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
<video id="excel" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
<video id="powerpoint" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
<video id="onenote" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
</div>
<script>
var myVideo = document.getElementById("word");
function Word() {
if (myVideo.onClick)
myVideo.play();
else
myVideo.pause();
}
function Excel() {
myVideo.play();
else
myVideo.pause();
}
function PowerPoint() {
myVideo.play();
else
myVideo.pause();
}
function OneNote() {
myVideo.play();
else
myVideo.pause();
}
</script>
</div>

I would use one function called videoSelect() and change the HTML content of a div with the id of player when the button is clicked.
innerHTML is used to change the html content of an element.
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
(this.id) retrieves the button's id and passes it to your videoSelect function.
this.id = element
Full example here -> https://codepen.io/chaosmaths/pen/aKmOVm/
As a note the video URLs in your post were the same for all of the examples so I've changed the URLs to what I believe are the videos you wanted. If they aren't just change the URL in corresponding variable. You can also use the video tag instead of iframe. I just used that because it is what YouTube provides with their embed codes.
HTML
<div class="row">
<div id="options">
<button id="word" onclick="videoSelect(this.id)">Word</button>
<button id="excel" onclick="videoSelect(this.id)">Excel</button>
<button id="powerpoint" onclick="videoSelect(this.id)">PowerPoint</button>
<button id="onenote" onclick="videoSelect(this.id)">OneNote</button>
</div>
<div id="player"></div>
</div>
CSS
#options{
text-align: center;
}
#player{
text-align: center;
margin-top: 15px;
}
JS
var word = 'https://www.youtube.com/embed/S-nHYzK-BVg';
var excel = 'https://www.youtube.com/embed/rwbho0CgEAE';
var powerpoint = 'https://www.youtube.com/embed/XF34-Wu6qWU';
var onenote = 'https://www.youtube.com/embed/qN15XnU96vQ';
var player = document.getElementById('player');
function videoSelect(element){
if (element === "word"){
player.innerHTML = '<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
}
if (element === "excel"){
player.innerHTML = '<iframe width="560" height="315" src="' + excel + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
}
if (element === "powerpoint"){
player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
}
if (element === "onenote"){
player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
}
}

Ghost featured image and iframe issue

HTML
<div class="blog-post">
<div class="blog-image">
<img src="img/featured-img.jpg"/>
</div>
<div class="blog-details">
<h3>Post Title Here</h3>
<ul class="blog-meta">
<li>Date</li>
<li>Author</li>
</ul>
<div class="blog-excerpt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yH4zLmi_6n0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
and i used the following js
function iframe_posts() {
var video_url = $(".blog-details").find("iframe").attr("src");
$(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
}
}
iframe_posts();
By this code Image replacing with iframe but same iframe showing in every "blog-post". I want to show the parent video only for each "blog-post". Suppose i have 2 blog-post with 2 different iframe. Now i want to show the iframe in
are
Anyone can help me please.

You have to deal with individual instances by looping over repeating elements
Can do this numerous ways but I would start at the top level repeating containers ... class=blog-post
$('.blog-post').each(function(){
// `this` is current instance of `blog-post`
var $post = $(this);
// use `find()` to look inside this `$post` instance
var video_url = $post.find('iframe').attr('src');
$post.find('.blog-image').html('....');
});

Try this code
function iframe_posts() {
var video_url = $(".blog-details").find("iframe").attr("src");
$(".blog-excerpt").hide();
$(".blog-image").html('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
}

$(".blog-post").each(function(){
var wrapper = $(this);
var video_url = wrapper.find("iframe").attr("src");
var iframe_content = ('<iframe width="560" height="315" src="' + video_url + '" frameborder="0" allowfullscreen></iframe>');
var video_div = wrapper.find(".blog-image")
video_div.each(function(){
video_div.html(iframe_content);
});
});
This code resolved my problem..