If a user already has one video selected (using the drop-down), and they select another, I would like the first video to be replaced with the new video. Instead, how I have it set up right now, it is just appending the second video (or even third, if a third video is selected) after the first. How do I change my code to clear any current videos from the page before loading the new video?
<body>
<h1>Let's Meditate.</h1>
<select id="timer">
<option value="select" disabled selected>Select One...</option>
<option value="twenty">20 minutes</option>
<option value="fifteen">15 minutes</option>
<option value="ten">10 minutes</option>
<option value="five">5 minutes</option>
</select>
<button type="button" onclick="meditate();">Go!</button>
<button onclick="refresh();">Refresh</button>
<div class="videos">
<iframe id="twentyMinVid" width="560" height="315" src="https://www.youtube.com/embed/VjxGjDo1tWA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="fifteenMinVid" width="560" height="315" src="https://www.youtube.com/embed/aIIEI33EUqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="tenMinVid" width="560" height="315" src="https://www.youtube.com/embed/Xl_B45DpMLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="fiveMinVid" width="560" height="315" src="https://www.youtube.com/embed/3RxXiFgkxGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<script>
function meditate() {
var timer = document.getElementById("timer").value;
if(timer == "twenty") {
document.getElementById("twentyMinVid").style.display = "block";
} else if(timer == "fifteen") {
document.getElementById("fifteenMinVid").style.display = "block";
} else if(timer == "ten") {
document.getElementById("tenMinVid").style.display = "block";
} else if(timer == "five") {
document.getElementById("fiveMinVid").style.display = "block";
} else {
document.querySelector(".videos").innerHTML = "Please select a time limit and click Go."
}
}
function refresh() {
location.reload();
}
</script>
</body>
Instead of making there display: block, try changing the iframe src.
<body>
<h1>Let's Meditate.</h1>
<select id="timer">
<option value="select" disabled selected>Select One...</option>
<option value="twenty">20 minutes</option>
<option value="fifteen">15 minutes</option>
<option value="ten">10 minutes</option>
<option value="five">5 minutes</option>
</select>
<button type="button" onclick="meditate();">Go!</button>
<button onclick="refresh();">Refresh</button>
<div class="videos">
<iframe id="iframe" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<script>
function meditate() {
var timer = document.getElementById("timer").value;
var iframe = document.getElementById("iframe");
if(timer == "twenty") {
iframe.src = "https://www.youtube.com/embed/VjxGjDo1tWA";
} else if(timer == "fifteen") {
iframe.src = "https://www.youtube.com/embed/aIIEI33EUqI";
} else if(timer == "ten") {
iframe.src = "https://www.youtube.com/embed/Xl_B45DpMLU";
} else if(timer == "five") {
iframe.src = "https://www.youtube.com/embed/3RxXiFgkxGc";
} else {
document.querySelector(".videos").innerHTML = "Please select a time limit and click Go."
}
}
function refresh() {
location.reload();
}
</script>
Here is my solution I modified your code a bit.
<body>
<h1>Let's Meditate.</h1>
<select id="timer">
<option value="select" disabled selected>Select One...</option>
<option value="twentyMinVid">20 minutes</option>
<option value="fifteenMinVid">15 minutes</option>
<option value="tenMinVid">10 minutes</option>
<option value="fiveMinVid">5 minutes</option>
</select>
<button type="button" onclick="meditate();">Go!</button>
<button onclick="refresh();">Refresh</button>
<div class="videos">
<iframe id="twentyMinVid" width="560" height="315" src="https://www.youtube.com/embed/VjxGjDo1tWA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="fifteenMinVid" width="560" height="315" src="https://www.youtube.com/embed/aIIEI33EUqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="tenMinVid" width="560" height="315" src="https://www.youtube.com/embed/Xl_B45DpMLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="fiveMinVid" width="560" height="315" src="https://www.youtube.com/embed/3RxXiFgkxGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<script>
function meditate() {
var timer = document.getElementById("timer").value;
if (timer === 'select') {
alert("Please select a time limit and click Go.");
return;
}
var options = document.getElementById("timer").options;
for (var i = 1; i < options.length; i++) {
if (options[i].value === timer) {
document.getElementById(timer).style.display = "block";
} else {
document.getElementById(options[i].value).style.display = "none";
}
}
}
function refresh() {
location.reload();
}
</script>
</body>
I tried to make it more generic so that if you add more option in dropdown then if dropdown value is same as frameId then no modification is needed in the logic to show/hide videos
link to fiddle
This is because you are not hiding the existing iframes when you display the new one.
For example, in this block:
if(timer == "twenty") {
document.getElementById("twentyMinVid").style.display = "block";
//Add code here for hiding the other divs
document.getElementById("fifteenMinVid").style.display = "none";
document.getElementById("tenMinVid").style.display = "none";
document.getElementById("fiveMinVid").style.display = "none";
}
....You need to do this same thing in other sections so that you are hiding other divs while you show the correct div.
Related
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 am trying to control an overlay function in HTML with an external js file and a second HTML page where the buttons are on.
So far it works when the buttons are on the same page. But I can not trigger the overlay from page 1 on page 2.
So the streaming page is the page where the viewer will be able to look and interact.
<div id="overlay" onclick="turnOverLayOff()">
<div id="textContainer"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSe5NWLPhYiLqM2YIUPCsVk3RB5h660Wei9eDGyKUhMMIB4iZw/viewform?embedded=true" width="640" height="415" frameborder="0" marginheight="0" marginwidth="0">Laden…</iframe> </div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5A9v-n53LtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="overlay.js"></script>
Then the JS file is
function turnOverLayOn(){
document.getElementById('overlay').style.display = 'block';
}
function turnOverLayOff(){
document.getElementById('overlay').style.display = 'none';
}
The second page from where I want to control the streamingpage from :
<div id="overlay" onclick="turnOverLayOff()">
<div id="textContainer">Test tekst whatever </div>
</div>
<div>
<button onclick="turnOverLayOn()">Click here to turn ON </button>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5A9v-n53LtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="overlay.js"></script>
As a means of signalling between the pages/tabs within the same browser you can use the BroadcastChannel api as mentioned in the comment above.
As demonstration - two basic HTML pages, both establish a connection to a common Broadcast Channel and one listens for messages from the other.
In the following the Video elements and iframes are commented out and replaced with simple text.
The getStyle function simply allows access programmatically to styles set on a named element and is used here to determine. The Javascript can be written to a single file and included in both pages as per the external.js...
Page 1 - the page being controlled
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Page 1: streamingpage</title>
<style>
#overlay{display:block}
</style>
</head>
<body>
<div id='overlay'>
<div id='textContainer'>
<!--<iframe src='https://docs.google.com/forms/d/e/1FAIpQLSe5NWLPhYiLqM2YIUPCsVk3RB5h660Wei9eDGyKUhMMIB4iZw/viewform?embedded=true' width='640' height='415' frameborder='0' marginheight='0' marginwidth='0'>Laden…</iframe>-->
IFRAME CONTENT - docs.google.com
</div>
</div>
<!--<iframe width='560' height='315' src='https://www.youtube.com/embed/5A9v-n53LtI' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>-->
VIDEO-YouTUBE
<script>
const getStyle=(n,css)=>{
let style;
if( window.getComputedStyle ){
style = window.getComputedStyle( n, null ).getPropertyValue( css );
} else if( n.currentStyle ){
css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
return p1.toUpperCase();
});
style = n.currentStyle[ css ];
} else {
style='';
}
return style;
}
let oChan=new BroadcastChannel( 'tabs' );
oChan.addEventListener('message',(e)=>{
//inspect messages as they arrive
console.log( e.data );
let div=document.getElementById('overlay');
div.style.display=getStyle(div,'display')=='block' ? 'none' : 'block';
});
</script>
</body>
</html>
Page 2 - the page doing the controlling
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>page2: controller</title>
<style>
#overlay{display:block}
</style>
</head>
<body>
<div id='overlay'>
<div id='textContainer'>Test tekst whatever </div>
</div>
<div>
<button id='toggler'>Click here to turn ON</button>
</div>
<!--<iframe width='560' height='315' src='https://www.youtube.com/embed/5A9v-n53LtI' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>-->
VIDEO-YouTUBE
<script>
const getStyle=(n,css)=>{
let style;
if( window.getComputedStyle ){
style = window.getComputedStyle( n, null ).getPropertyValue( css );
} else if( n.currentStyle ){
css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
return p1.toUpperCase();
});
style = n.currentStyle[ css ];
} else {
style='';
}
return style;
}
let oChan=new BroadcastChannel( 'tabs' );
sendmessage=function( data ){
oChan.postMessage( { 'data':data } )
};
let bttn=document.querySelector('button#toggler');
bttn.addEventListener('click',e=>{
let div=document.getElementById('overlay');
div.style.display=getStyle(div,'display')=='block' ? 'none' : 'block'
/*
send a message - the payload can be tailored to suit your needs and processed within the listener on page 1
this simply sends the `display` status of the local DIV but you can send whatever is meaningful/helpful.
*/
sendmessage( { state:getStyle(div,'display') } );
});
</script>
</body>
</html>
I have a lot of iframes and they are from spotify and I keep getting pop ups that ask for the content of the device which will cause one embed/iframe to pause when another one stops. How can I get all the iframes to not allow popups? This is just a small snippet of what I have:
my site can be found here: https://50izac02.github.io/sb/music.html
<script>
var songs1 = [
"https://open.spotify.com/embed/track/1K9QXJtypYRMVrfHixmHh3",
"https://open.spotify.com/embed/track/7clyJIrLkEbXUDwj1tC9zz",
"https://open.spotify.com/embed/track/0AB5CTb04eqXnV9hEZx9FL",
"https://open.spotify.com/embed/track/31G6jTLEpHwGs3vpQ7iUJM"];
document.getElementById("spot1").src = songs1[Math.floor(Math.random() * 4) + 0];
var songs2 = [
"https://open.spotify.com/embed/track/1BlqKx3JtMKY3K6F0uUbqW",
"https://open.spotify.com/embed/track/7h2yzh9vIBxSBN3885QyQt",
"https://open.spotify.com/embed/track/4EAV2cKiqKP5UPZmY6dejk",
"https://open.spotify.com/embed/track/5dqrgmHHBuUzwYKBXJuIm0"
];
document.getElementById("spot2").src = songs2[Math.floor(Math.random() * 4) + 0];
var songs3 = [
"https://open.spotify.com/embed/track/5dqrgmHHBuUzwYKBXJuIm0",
"https://open.spotify.com/embed/track/6QyBWey7P8ILuhS5RO7xYe",
"https://open.spotify.com/embed/track/5qrSlOut2rNAWv3ubArkNy",
"https://open.spotify.com/embed/track/0TN3FKCgNsck8Z0t463bU0",
];
document.getElementById("spot3").src = songs3[Math.floor(Math.random() * 4) + 0];
var songs4 = [
"https://open.spotify.com/embed/track/5IcpFfoUZLU3G7b8BtppFi",
"https://open.spotify.com/embed/track/4R8RG1OWtp0ahfyGUcD76M",
"https://open.spotify.com/embed/track/6IHWepcSxwLdzM38nQSrnC",
"https://open.spotify.com/embed/track/6JyuJFedEvPmdWQW0PkbGJ",];
document.getElementById("spot4").src = songs4[Math.floor(Math.random() * 4) + 0];
var songs5 = [
"https://open.spotify.com/embed/track/41n0s0MdHk3SQYrJ4djpXb",
"https://open.spotify.com/embed/track/3uKxSYyWgMqu9LrgC2Lo7v",
"https://open.spotify.com/embed/track/0e9yz3Fz7Nn6I5E4XBP8no",
"https://open.spotify.com/embed/track/4hPpVbbakQNv8YTHYaOJP4",
];
document.getElementById("spot5").src = songs5[Math.floor(Math.random() * 4) + 0];
<div id="row 1">
<iframe id="spot1" src="" width="250" height="90" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<iframe id="spot2" src="" width="250" height="90" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<iframe id="spot3" src="" width="250" height="90" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<iframe id="spot4" src="" width="250" height="90" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<iframe id="spot5" src="" width="250" height="90" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
You could sandbox the iframe with: sandbox="allow-scripts". That should stop them from producing popups.
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>
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>';
}
}