I'm new to html / css / javascript and was making a website. I have divs that I call video panels because on each panel there's a video and a caption. I am trying to write a script that when called grabs the contents of the panels and places the contents of the next panel (on each click) where the contents of the 0th panel would be (all are hidden but the 0th panel in the array, trying to make each next panel appear on click).
This is my first question, sorry if it's worded weird and thanks for the help!
var counter = 0;
function nextSlide() {
var panel0 = document.getElementById("panel0").innerHTML;
panel1 = document.getElementById("panel1").innerHTML;
panel2 = document.getElementById("panel2").innerHTML;
panel3 = document.getElementById("panel3").innerHTML;
panel4 = document.getElementById("panel4").innerHTML;
var panels_contents = [panel0, panel1, panel2, panel3, panel4];
if (counter < 4) {
var switcher = panels_contents[counter + 1];
original = panels_contents[0];
panels_contents[0] = switcher;
panels_contents[counter + 1] = original;
counter++;
} else {
counter = 0;
}
}
#panel1 { display: none; }
#panel2 { display: none; }
#panel3 { display: none; }
#panel4 { display: none; }
<div class="video-panel" id="panel0">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<button onclick="nextSlide();">Press me</button>
i have updated your code . you can use below code it will work for you
var counter = 0;
function nextSlide() {
var nextSlide = counter + 1 ;
if (nextSlide <= 4) {
document.getElementById('panel'+counter).style.display = 'none';
document.getElementById('panel'+nextSlide).style.display = 'block';
counter++;
} else {
counter = 0;
document.getElementById('panel4').style.display = 'none';
document.getElementById('panel0').style.display = 'block';
}
}
#panel1 { display: none; }
#panel2 { display: none; }
#panel3 { display: none; }
#panel4 { display: none; }
<div class="video-panel" id="panel0">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 0</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel1">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 1</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel2">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 2</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel3">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 3</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel4">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 4</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<button onclick="nextSlide();">Press me</button>
function prevSlide() {
var nextSlide = counter - 1 ;
if (nextSlide >= 0) {
console.log('counter',counter);
console.log('nextSlide',nextSlide);
document.getElementById('panel'+counter).style.display = 'none';
document.getElementById('panel'+nextSlide).style.display = 'block';
counter--;
} else {
counter = 4;
document.getElementById('panel4').style.display = 'block';
document.getElementById('panel0').style.display = 'none';
}
}
Related
I have a video page displaying youtube videos that some of our customers have made, but I would like them to shuffle/randomize on page load. I tried a few scripts from around the web, but to no avail. Did not include css as i don't believe it's relevant, but if it is just let me know. Thank you
// This script is one of the ones i found online somewhere
$(function() {
var parent = $(".video-page-wrap");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-page-wrap d-flex">
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/aMxWn63mEWc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/HLIrLLqpACE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/eH61UnQDq1k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/K1so5z8CzOM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/KWGx5WKtJpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/E2-tZsr3FKE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/8ib4b-ie29Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/J9_lAcsFCwQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bSUezxWuRCk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/aRCHbJPqfBU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/KNDWQALC0RA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BWgLAXamLS8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
In a website I'm working on I have 3 embedded youtube iframes that are offscreen. I put loading="lazy" on all of them to optimize my website. I have latest chrome version with all necessary flags enabled. All have width and height and are not hidden with any css. But when the main page loads up, all the scripts and data related to the videos are immediately fetched, even before scrolling down to them. Anyone has an idea why it happens?
const Videos = () => {
return (
<div className="row pt-5 pb-5">
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
</div>
)
}
I have a video on my page and I want to show my video in the model dialog after a click on the video.
I have 4 videos on my page and if I click any video from 4 videos it shows in the model.
My code:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><font color="black"><strong>Youtube Video</strong></h5>
</div>
<div class="modal-body">
<form method="POST" id="otp_form" action="">
<div class="thumb">
<iframe width="972" height="547" src="#" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</form>
</div>
</div>
</div>
</div>
<section id="gallery" class="bg-lighter">
<div class="container-fluid pt-70 pb-0">
<div class="section-content">
<div class="row">
<div class="col-md-12">
<div id="grid" class="gallery-isotope grid-4 gutter clearfix">
<div class="gallery-item photography">
<div class="price pt-30">
<h5 class="text-uppercase letter-space-2"></h5>
</div>
<div class="thumb">
<iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link1']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen data-toggle="modal" data-target="#exampleModal"></iframe>
</div>
</div>
<div class="gallery-item branding">
<div class="price pt-30">
<h5 class="text-uppercase letter-space-2"></h5>
</div>
<div class="thumb">
<iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link2']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="gallery-item design">
<div class="price pt-30">
<h5 class="text-uppercase letter-space-2"></h5>
</div>
<div class="thumb">
<iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link3']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="gallery-item photography">
<div class="price pt-30">
<h5 class="text-uppercase letter-space-2"></h5>
</div>
<div class="thumb">
<iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link4']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I do not know how to do this after clicking any video it opens in the model box.
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><font color="black"><strong>Youtube Video</strong></h5>
</div>
<div class="modal-body">
<form method="POST" id="otp_form" action="">
<div class="thumb" id="exampleModalVideoUrl"></div>
</form>
</div>
</div>
</div>
</div>
<section id="gallery" class="bg-lighter">
<div class="container-fluid pt-70 pb-0">
<div class="section-content">
<div class="row">
<div class="col-md-12">
<div id="grid" class="gallery-isotope grid-4 gutter clearfix">
<div class="gallery-item photography">
<div class="price pt-30">
<h5 class="text-uppercase letter-space-2"></h5>
</div>
<div class="thumb galerryVideoCopy">
<iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link1']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen data-toggle="modal" data-target="#exampleModal"></iframe>
</div>
</div>
<div class="gallery-item branding">
<div class="price pt-30">
<h5 class="text-uppercase letter-space-2"></h5>
</div>
<div class="thumb galerryVideoCopy">
<iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link2']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="gallery-item design">
<div class="price pt-30">
<h5 class="text-uppercase letter-space-2"></h5>
</div>
<div class="thumb galerryVideoCopy">
<iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link3']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="gallery-item photography">
<div class="price pt-30">
<h5 class="text-uppercase letter-space-2"></h5>
</div>
<div class="thumb galerryVideoCopy">
<iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link4']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery("#exampleModal").modal({"keyboard": true, "show": false});
jQuery('body').off('click', '.galerryVideoCopy');
jQuery('body').on('click', '.galerryVideoCopy', function(){
var clickVideo = jQuery(this).html();
jQuery("#exampleModalVideoUrl").html(clickVideo);
jQuery("#exampleModal").modal("show");
});
});
</script>
I have a embeded iframe text element in 3 modal elemets and each has a Copy button. When I click on one copy button, I need to get the output of the particular iframe text. If I use
$(".embed-iframe-text").text();
It will output all the three iframe texts together. To avoid that and get the particular iframe text, I used
$(this).closest(".embed-iframe-text").text();
but can't get the output. What is the wrong here?
$(".copy-iframe").on("click", function() {
var m = $(".embed-iframe-text").text();
var n = $(this).closest(".embed-iframe-text").text();
alert(n);
});
.embed-iframe-text, .embed-src span {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- modal 1 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<!-- modal 2 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<!-- modal 3 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
var n = $(this).closest(".embed-iframe-text").text();
this won't work as it doesn't comes on the same level, you need to go to the parent and find the item inside it.
use .parents('.modal-body').find(".embed-iframe-text")
$(".copy-iframe").on("click", function() {
var m = $(".embed-iframe-text").text();
var n = $(this).parents('.modal-body').find(".embed-iframe-text").text();
console.log(n)
});
.embed-iframe-text,
.embed-src span {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- modal 1 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe1 width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<!-- modal 2 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe2 width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<!-- modal 3 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe3 width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
I just realized from the comment that or .closest('.modal-body').find(".embed-iframe-text") would work too. this will find the parent modal-body first and then the child.
I have this code in JS:
/*
Video play
=========================== */
$("#ytplayer").css({'opacity':'0','filter':'alpha(opacity=0)'});
$( ".start-video" ).on("click",function(){
$('#ytplayer').fadeTo(900, 1);$( ".video-image" ).fadeOut(800);
return false;
});
$(document).on('click', '.start-video', function () {
$(this).fadeOut(800);
player.playVideo();
return false;
});
And I Have this code in HTML:
<div class="col-md-6">
<div class="video-wrapper">
<div class="video-container">
<div id="ytplayer" class="player"></div>
</div>
<button class="start-video"></button>
<div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />
</div>
I don't know where to paste the iFrame from YouTube. Please help.
<div class="col-md-6">
<div class="video-wrapper">
<div class="video-container">
<div id="ytplayer" class="player">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xmVRZr91Qok" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<button class="start-video">Start</button>
<div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />
All you need to do is to add the iframe tag to your ytplayer Div