We Keep Coding

How to add a smooth animation to the progress bar

When I click I want to smoothly add segments to the progress bar. They are added but instantly. What could be the problem?
I tried to implement a smooth animation with setInterval, but nothing comes out. Percentages are also added instantly.
let progressBar = document.querySelector(".progressbar");
let progressBarValue = document.querySelector(".progressbar__value");
const body = document.querySelector("body");
let progressBarStartValue = 0;
let progressBarEndValue = 100;
let speed = 50;
body.addEventListener("click", function(e) {
if (progressBarStartValue === progressBarEndValue) {
alert("you have completed all the tasks");
} else {
let progress = setInterval(() => {
if (progressBarStartValue != 100) {
progressBarStartValue += 10;
clearInterval(progress);
}
progressBarValue.textContent = `${progressBarStartValue}%`;
progressBar.style.background = `conic-gradient(
#FFF ${progressBarStartValue * 3.6}deg,
#262623 ${progressBarStartValue * 3.6}deg
)`;
}, speed);
}
});
.progressbar {
position: relative;
height: 150px;
width: 150px;
background-color: #262623;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.progressbar::before {
content: "";
position: absolute;
height: 80%;
width: 80%;
background-color: #0f0f0f;
border-radius: 50%;
}
.progressbar__value {
color: #fff;
z-index: 9;
font-size: 25px;
font-weight: 600;
}
<main class="main">
<section class="statistic">
<div class="container">
<div class="statistic__inner">
<div class="statistic__text">
<h2 class="statistic__title">You're almost there!</h2>
<p class="statistic__subtitle">keep up the good work</p>
</div>
<div class="progressbar"><span class="progressbar__value">0%</span></div>
</div>
</div>
</section>
</main>

This may not be exactly what you're looking for, but with the conic-gradient() implementation you're using, I'd recommend checking out a library call anime.js.
Here's an example with your implementation (same html and css):
// your.js
let progressBar = document.querySelector(".progressbar");
let progressBarValue = document.querySelector(".progressbar__value");
const body = document.querySelector("body");
// Switched to object for target in anime()
let progressBarObject = {
progressBarStartValue: 0,
progressBarEndValue: 100,
progressBarAnimationValue: 0 * 3.6 // New value needed for smoothing the progress bar, since the progress value needs to be multiplied by 3.6
}
// Not necessary, but I recommend changing the event listener to pointerup for better support
// Also not necessary, I changed function to arrow function for my own preference
body.addEventListener("pointerup", e => {
e.preventDefault()
if (progressBarObject.progressBarStartValue === progressBarObject.progressBarEndValue) {
alert("you have completed all the tasks");
} else {
let newValue = 0 // Needed so we can set the value, before it's applied in anime()
if (progressBarObject.progressBarStartValue != 100) {
// Math.ceil() allows us to round to the nearest 10 to guarantee the correct output
newValue = Math.ceil((progressBarObject.progressBarStartValue + 10) / 10) * 10;
}
// Optional: Prevents accidentally going over 100 somehow
if (newValue > 100) {
newValue = 100
}
anime({
targets: progressBarObject,
progressBarStartValue: newValue,
progressBarAnimationValue: newValue * 3.6,
easing: 'easeInOutExpo',
round: 1, // Rounds to nearest 1 so you don't have 0.3339...% displayed in progressBarValue
update: () => {
progressBar.style.backgroundImage = `conic-gradient(
#FFF ${progressBarObject.progressBarAnimationValue}deg,
#262623 ${progressBarObject.progressBarAnimationValue}deg)`;
progressBarValue.textContent = `${progressBarObject.progressBarStartValue}%`;
},
duration: 500
});
}
});
Here's a CodePen using the anime.js CDN: Circular Progress Bar Smoothing
If you don't want to use a javascript library, then I'd recommend switching from the conic-gradient() to something else. I hear using an .svg circle with stroke and stroke-dasharray can work great with CSS transition.

You shouldn't setInterval your progress variable like this. instead, put it as a global variable outside the function then use it to gradually add 1 as long as the start value is less than progress, and you still can control the speed with your speed variable.
let progressBar = document.querySelector(".progressbar");
let progressBarValue = document.querySelector(".progressbar__value");
const body = document.querySelector("body");
let progressBarStartValue = 0;
let progressBarEndValue = 100;
let speed = 50;
let progress = 0;
body.addEventListener("click", function(e) {
if (progressBarStartValue === progressBarEndValue) {
alert("you have completed all the tasks");
} else {
progress += 10;
setInterval(() => {
if (progressBarStartValue < progress) {
progressBarStartValue += 1;
clearInterval();
}
progressBarValue.textContent = `${progressBarStartValue}%`;
progressBar.style.background = `conic-gradient(
#FFF ${progressBarStartValue * 3.6}deg,
#262623 ${progressBarStartValue * 3.6}deg
)`;
}, speed);
}
});
.progressbar {
position: relative;
height: 150px;
width: 150px;
background-color: #262623;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid red;
}
.progressbar::before {
content: "";
position: absolute;
height: 80%;
width: 80%;
background-color: #0f0f0f;
border-radius: 50%;
border: 3px solid blue;
}
.progressbar__value {
color: #fff;
z-index: 9;
font-size: 25px;
font-weight: 600;
}
<main class="main">
<section class="statistic">
<div class="container">
<div class="statistic__inner">
<div class="statistic__text">
<h2 class="statistic__title">You're almost there!</h2>
<p class="statistic__subtitle">keep up the good work</p>
</div>
<div class="progressbar"><span class="progressbar__value">0%</span></div>
</div>
</div>
</section>
</main>

How can I set this slide panel jQuery plugin to default close?

I've implemented the panel toggle script by DojoGeekRA which is published at JqueryScript.net (demo https://www.jqueryscript.net/demo/Creating-A-Toggable-Bottom-Content-Panel-Using-jQuery-CSS/)
It functions as needed as far as the toggle open / close behavior, however it defaults to open state when the page is loaded and I need it to default to close.
The JS
(function($) {
jQuery(document).ready(function() {
Panel.init();
$(document).on('click', '.tab-controller', function() {
Panel.togglePanel();
});
});
var Panel = {
isVisible : true,
showMessage : null,
hideMessage : null,
animationDuration : 650,
animationEasing : 'linear',
init : function() {},
hidePanel : function() {
$('.panel-wrapper').animate({
bottom : -(Panel.getAnimationOffset())
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = false;
Panel.updateTabMessage();
});
},
showPanel : function() {
$('.panel-wrapper').animate({
bottom : 0
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = true;
Panel.updateTabMessage();
});
},
togglePanel : function() {
((this.isVisible) ? this.hidePanel : this.showPanel)();
},
updateTabMessage : function() {
if (this.isVisible) {
$('.tab-controller .close').show();
$('.tab-controller .show').hide();
} else {
$('.tab-controller .close').hide();
$('.tab-controller .show').show();
}
},
getAnimationOffset : function() {
return $('.panel-content').height();
}
}
})(jQuery);
I tried
setting isVisible to false but nothing changes (yes I refreshed the page)
set the .panel-content css rule to display:none and though it responds to default hidden, the JS is still in open mode so the tab states Close and goes off screen when clicked.
The HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="plugin.css?v=9">
<script src="jquery-1.11.0.min.js"></script>
<script src="main.js?v=8"></script>
</head>
<body style="background: #ddd;">
<div class="panel-wrapper">
<div class="panel-controller">
<div class="tab-controller">
<span class="close">Close</span>
<span class="show">Open</span>
</div>
</div>
<div class="panel-content">
<div class="content clearfix">
the content here
</div>
</div>
</div>
</body>
</html>
The CSS
.panel-wrapper * {
box-sizing: border-box;
}
.panel-wrapper {
position: fixed;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 99999;
font-family: sans-serif;
}
.panel-controller {
position: relative;
overflow: hidden;
}
.tab-controller {
float: right;
margin-right: 50px;
padding: 5px;
background-color: #ff0000;
border-radius: 5px 5px 0 0;
display: block;
font-size: 16px;
font-weight: bold;
color: white;
cursor: pointer;
}
.tab-controller .show {
display: none;
}
.panel-content {
overflow: hidden;
}
.panel-content .content {
overflow: hidden;
margin: 0 5px 5px 0;
}
.clearfix:before, .clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
Update
The answer from #The_Death_Raw did the task (thanks), however I needed to be able to set options dynamically and use multiple instances, so I added a function closure and setting variable. Here is the modified working script if desired.
(function($) {
$.fn.bottomSlidePanel = function(options)
{
var wrap = this;
return this.each(function()
{
var setting = $.extend ({
tab: ".tab-controller",
contentarea: ".panel-content",
defaultState: "close",
animTime: 250
}, options);
$(function() {
if( setting.defaultState === "close" ) {
Panel.init(Panel.hidePanel(Panel.animationDuration = 0));
setTimeout(function() {
Panel.hidePanel(Panel.animationDuration = setting.animTime);
}, 1);
}else{
Panel.init();
}
$(setting.tab).on("click", function() {
Panel.togglePanel();
});
});
var Panel = {
isVisible : true,
showMessage : null,
hideMessage : null,
animationDuration : setting.animTime,
animationEasing : "linear",
init : function() {},
hidePanel : function() {
$(wrap).animate({
bottom : -(Panel.getAnimationOffset())
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = false;
Panel.updateTabMessage();
});
},
showPanel : function() {
$(wrap).animate({
bottom : 0
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = true;
Panel.updateTabMessage();
});
},
togglePanel : function() {
((this.isVisible) ? this.hidePanel : this.showPanel)();
},
updateTabMessage : function() {
if (this.isVisible) {
$(setting.tab+' .tabclose').show();
$(setting.tab+' .tabshow').hide();
} else {
$(setting.tab+' .tabclose').hide();
$(setting.tab+' .tabshow').show();
}
},
getAnimationOffset : function() {
return $(setting.contentarea).height();
}
}
});
}
}(jQuery));
Use
Basic using core defaults
jQuery(function($) {
// attach to the parent wrap element
$(".panel-wrapper").bottomSlidePanel();
});
Use options
jQuery(function($) {
// attach to the parent wrap element
$(".panel-wrapper").bottomSlidePanel({
tab: ".tab-controller", // set tab class or ID
contentarea: ".panel-content", // set element class or ID
defaultState: "open", // omit to allow default close
animTime: 500 // (int) omit to use default value
});
});
If anyone has the ability to make it more efficient, please post it.

Hide the panel and then set AnimationDuration to 0 to hide on page load.
Wait for 1s and then set animation to 650 to make it work
(function($) {
jQuery(document).ready(function() {
Panel.init(Panel.hidePanel(Panel.animationDuration = 0));
setTimeout(function(){ Panel.hidePanel(Panel.animationDuration = 650); }, 1);
$(document).on('click', '.tab-controller', function() {
Panel.togglePanel();
});
});
var Panel = {
isVisible : true,
showMessage : null,
hideMessage : null,
animationDuration : 650,
animationEasing : 'linear',
init : function() {
},
hidePanel : function() {
$('.panel-wrapper').animate({
bottom : -(Panel.getAnimationOffset())
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = false;
Panel.updateTabMessage();
});
},
showPanel : function() {
$('.panel-wrapper').animate({
bottom : 0
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = true;
Panel.updateTabMessage();
});
},
togglePanel : function() {
((this.isVisible) ? this.hidePanel : this.showPanel)();
},
updateTabMessage : function() {
if (this.isVisible) {
$('.tab-controller .close').show();
$('.tab-controller .show').hide();
} else {
$('.tab-controller .close').hide();
$('.tab-controller .show').show();
}
},
getAnimationOffset : function() {
return $('.panel-content').height();
}
}
})(jQuery);
.panel-wrapper * {
box-sizing: border-box;
}
.panel-wrapper {
position: fixed;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 99999;
font-family: sans-serif;
}
.panel-controller {
position: relative;
overflow: hidden;
}
.tab-controller {
float: right;
margin-right: 50px;
padding: 5px;
background-color: #ff0000;
border-radius: 5px 5px 0 0;
display: block;
font-size: 16px;
font-weight: bold;
color: white;
cursor: pointer;
}
.tab-controller .show {
display: none;
}
.panel-content {
overflow: hidden;
}
.panel-content .content {
overflow: hidden;
margin: 0 5px 5px 0;
}
.clearfix:before, .clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="background: #ddd;">
<div class="panel-wrapper">
<div class="panel-controller">
<div class="tab-controller">
<span class="close">Close</span>
<span class="show">Open</span>
</div>
</div>
<div class="panel-content">
<div class="content clearfix">
the content here
</div>
</div>
</div>

Next slide button

I'm having trouble putting a button on the next slide, the mouse and keys of any keyboard works, but wanted to put a button or 2, one to go back and another to move on, I thought of a timer but the success rate was 0% , I'm a good time trying but this really hard, if anyone can help me in this, would help me a lot
/*********************
* Helpers Code
********************/
/**
* #function DOMReady
*
* #param callback
* #param element
* #param listener
* #returns {*}
* #constructor
*/
const DOMReady = ((
callback = () => {},
element = document,
listener = 'addEventListener'
) => {
return (element[listener]) ? element[listener]('DOMContentLoaded', callback) : window.attachEvent('onload', callback);
});
/**
* #function ProjectAPI
*
* #type {{hasClass, addClass, removeClass}}
*/
const ProjectAPI = (() => {
let hasClass,
addClass,
removeClass;
hasClass = ((el, className) => {
if (el === null) {
return;
}
if (el.classList) {
return el.classList.contains(className);
}
else {
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
});
addClass = ((el, className) => {
if (el === null) {
return;
}
if (el.classList) {
el.classList.add(className);
}
else if (!hasClass(el, className)) {
el.className += ' ' + className
}
});
removeClass = ((el, className) => {
if (el === null) {
return;
}
if (el.classList) {
el.classList.remove(className);
}
else if (hasClass(el, className)) {
let reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
el.className = el.className.replace(reg, ' ');
}
});
return {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass
};
})();
/*********************
* Application Code
********************/
/**
* #function readyFunction
*
* #type {Function}
*/
const readyFunction = (() => {
const KEY_UP = 38;
const KEY_DOWN = 40;
let scrollingClass = 'js-scrolling',
scrollingActiveClass = scrollingClass + '--active',
scrollingInactiveClass = scrollingClass + '--inactive',
scrollingTime = 1350,
scrollingIsActive = false,
currentPage = 1,
countOfPages = document.querySelectorAll('.' + scrollingClass + '__page').length,
prefixPage = '.' + scrollingClass + '__page-',
_switchPages,
_scrollingUp,
_scrollingDown,
_mouseWheelEvent,
_keyDownEvent,
init;
/**
* #function _switchPages
*
* #private
*/
_switchPages = () => {
let _getPageDomEl;
/**
* #function _getPageDomEl
*
* #param page
* #returns {Element}
* #private
*/
_getPageDomEl = (page = currentPage) => {
return document.querySelector(prefixPage + page);
};
scrollingIsActive = true;
ProjectAPI.removeClass(
_getPageDomEl(),
scrollingInactiveClass
);
ProjectAPI.addClass(
_getPageDomEl(),
scrollingActiveClass
);
ProjectAPI.addClass(
_getPageDomEl(currentPage - 1),
scrollingInactiveClass
);
ProjectAPI.removeClass(
_getPageDomEl(currentPage + 1),
scrollingActiveClass
);
setTimeout(
() => {
return scrollingIsActive = false;
},
scrollingTime
);
};
/**
* #function _scrollingUp
*
* #private
*/
_scrollingUp = () => {
if (currentPage === 1) {
return;
}
currentPage--;
_switchPages();
};
/**
* #function _scrollingDown
*
* #private
*/
_scrollingDown = () => {
if (currentPage === countOfPages) {
return;
}
currentPage++;
_switchPages();
};
/**
* #function _mouseWheelEvent
*
* #param e
* #private
*/
_mouseWheelEvent = (e) => {
if (scrollingIsActive) {
return;
}
if (e.wheelDelta > 0 || e.detail < 0) {
_scrollingUp();
}
else if (e.wheelDelta < 0 || e.detail > 0) {
_scrollingDown();
}
};
/**
* #function _keyDownEvent
*
* #param e
* #private
*/
_keyDownEvent = (e) => {
if (scrollingIsActive) {
return;
}
let keyCode = e.keyCode || e.which;
if (keyCode === KEY_UP) {
_scrollingUp();
}
else if (keyCode === KEY_DOWN) {
_scrollingDown();
}
};
/**
* #function init
*
* #note auto-launch
*/
init = (() => {
document.addEventListener(
'mousewheel',
_mouseWheelEvent,
false
);
document.addEventListener(
'DOMMouseScroll',
_mouseWheelEvent,
false
);
document.addEventListener(
'keydown',
_keyDownEvent,
false
);
})();
});
/**
* Launcher
*/
DOMReady(readyFunction);
/***********************
* Variables
**********************/
/***********************
* Project Main Styles
**********************/
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0; }
body {
font-family: "Open Sans", sans-serif;
background-color: #282828; }
.slider-pages {
overflow: hidden;
position: relative;
zoom: 59%;
width: 94%;
left: 3%;
height: 100vh; }
.slider-page {
position: absolute;
top: 0;
width: 50%;
height: 100vh;
transition: transform 1350ms; }
.slider-page--skew {
overflow: hidden;
position: absolute;
top: 0;
width: 140%;
height: 100%;
background: #282828;
transform: skewX(-18deg); }
.slider-page--left {
left: 0;
transform: translateX(-32.5vh) translateY(100%) translateZ(0); }
.slider-page--left .slider-page--skew {
left: -40%; }
.slider-page--left .slider-page__content {
padding: auto 30% auto 30%;
transform-origin: 100% 0; }
.slider-page--right {
left: 50%;
transform: translateX(32.5vh) translateY(-100%) translateZ(0); }
.slider-page--right .slider-page--skew {
right: -40%; }
.slider-page--right .slider-page__content {
padding: auto 30% auto 30%;
transform-origin: 0 100%; }
.slider-page__content {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 30% 0 30%;
color: #e2e2e2;
background-size: cover;
transform: skewX(18deg);
transition: transform 1350ms; }
.slider-page__title {
margin-bottom: 1em;
font-size: 1em;
text-align: center;
text-transform: uppercase; }
.slider-page__title--big {
font-size: 1.2em; }
.slider-page__description {
font-size: 1em;
text-align: center; }
.slider-page__link {
color: #80a1c1; }
.slider-page__link:hover, .slider-page__link:focus {
color: #6386a9;
text-decoration: none; }
/***********************
* Project JS Styles
**********************/
.js-scrolling__page {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.js-scrolling--active .slider-page {
transform: translateX(0) translateY(0) translateZ(0); }
.js-scrolling--inactive .slider-page__content {
transform: skewX(18deg) scale(0.9); }
.js-scrolling__page-1 .slider-page--left .slider-page__content {
background-image: url("https://cdn.discordapp.com/attachments/584536200052867077/687769359183380537/ram-of-re-zero-starting-life-in-another-world-wallpaper-3440x1440-2148_15.png"); }
.js-scrolling__page-1 .slider-page--right .slider-page__content {
background-color: #282828; }
.js-scrolling__page-2 .slider-page--left .slider-page__content {
background-color: #e2e2e2; }
.js-scrolling__page-2 .slider-page--left .slider-page__title,
.js-scrolling__page-2 .slider-page--left .slider-page__description {
color: #282828; }
.js-scrolling__page-2 .slider-page--right .slider-page__content {
background-image: url("https://cdn.discordapp.com/attachments/584536200052867077/687766774950789160/9ibz1cnnwdp31.png"); }
.js-scrolling__page-3 .slider-page--left .slider-page__content {
background-image: url("https://cdn.discordapp.com/attachments/584536200052867077/687773688782913563/9ibz1cnnwdp31.png"); }
.js-scrolling__page-3 .slider-page--right .slider-page__content {
background-color: #282828; }
<section class="slider-pages">
<article class="js-scrolling__page js-scrolling__page-1 js-scrolling--active">
<div class="slider-page slider-page--left">
<div class="slider-page--skew">
<div class="slider-page__content">
</div>
<!-- /.slider-page__content -->
</div>
<!-- /.slider-page--skew -->
</div>
<!-- /.slider-page slider-page--left -->
<div class="slider-page slider-page--right">
<div class="slider-page--skew">
<div class="slider-page__content">
<h1 class="slider-page__title slider-page__title--big">
Re:Zero kara Hajimeru Isekai Seikatsu
</h1>
<!-- /.slider-page__title slider-page__title--big -->
<h2 class="slider-page__title">
</h2>
<!-- /.slider-page__title -->
<p class="slider-page__description">
End
</p>
<!-- /.slider-page__description -->
</div>
<!-- /.slider-page__content -->
</div>
<!-- /.slider-page--skew -->
</div>
<!-- /.slider-page slider-page--right -->
</article>
<!-- /.js-scrolling__page js-scrolling__page-1 js-scrolling--active -->
<article class="js-scrolling__page js-scrolling__page-2">
<div class="slider-page slider-page--left">
<div class="slider-page--skew">
<div class="slider-page__content">
<h1 class="slider-page__title">
EVANGELION 3.0 + 1.0
</h1>
<!-- /.slider-page__title -->
<p class="slider-page__description">
ENd
</p>
<!-- /.slider-page__description -->
</div>
<!-- /.slider-page__content -->
</div>
<!-- /.slider-page--skew -->
</div>
<!-- /.slider-page slider-page--left -->
<div class="slider-page slider-page--right">
<div class="slider-page--skew">
<div class="slider-page__content">
</div>
<!-- /.slider-page__content -->
</div>
<!-- /.slider-page--skew -->
</div>
<!-- /.slider-page slider-page--right -->
</article>
<!-- /.js-scrolling__page js-scrolling__page-2 -->

You can use the functions you already defined, namely _scrollingUp and _scrollingDown, and assign them to your buttons' onclick events. By doing this, these functions will be called whenever the right button is clicked.
A simplified example would be:
document.getElementById("prev").onclick = _scrollingUp;
document.getElementById("next").onclick = _scrollingDown;
<button id="prev">Previous</button>
<button id="next">Next</button>

How to chain javascript hide/show function for each div ID?

I have many <p>s with the same function.
document.getElementById("minus").onclick = function() {
functionHide()
};
function functionHide() {
document.getElementById("plus").style.display = "block";
document.getElementById("minus").style.display = "none";
}
document.getElementById("plus").onclick = function() {
functionShow()
};
function functionShow() {
document.getElementById("plus").style.display = "none";
document.getElementById("minus").style.display = "block";
}
#plus {
display: none;
cursor: pointer;
}
#minus {
cursor: pointer;
}
.floatright {
float: right
}
.w50 {
width: 50%;
text-align: center;
}
<div class="w50">
<p>What paperwork do I need to complete to file for divorce ?
<span class="floatright inlineb" id="minus">- </span>
<span class="floatright inlineb" id="plus">+</span>
</p>
<p>How do I change my custody and suport orders ?
<span class="floatright inlineb" id="minus">- </span>
<span class="floatright inlineb" id="plus">+</span>
</p>
</div>
When I click on the first minus ( "-" ) it works correctly.
but for the second, it doesn't work.
I want to know how can I automatically chain for all others divs. they have the same typing code.
Also, I would know how can I change the last element (" - ") when an another + is clicked?
Here is a preview of what I want to do
And a fiddle: https://jsfiddle.net/khrismuc/prsebqg3/15/

You are using duplicate IDs, which is a no-no. Here is an example using classes and .querySelectorAll.
var minuses = document.querySelectorAll(".minus");
var pluses = document.querySelectorAll(".plus");
minuses.forEach(function(minus) {
minus.addEventListener('click', functionHide);
});
pluses.forEach(function(plus) {
plus.addEventListener('click', functionShow);
});
function functionHide() {
pluses.forEach(function(plus) {
plus.style.display = "block";
});
minuses.forEach(function(minus) {
minus.style.display = "none";
});
}
function functionShow() {
pluses.forEach(function(plus) {
plus.style.display = "none";
});
minuses.forEach(function(minus) {
minus.style.display = "block";
});
}
You can modify for your particular uses.

Your logic needs to be slightly more complex:
var current = -1;
function handleClick(clicked) {
$(".w50 p").removeClass("active").find("span").text("+");
$("#box p").hide();
if (current === clicked) {
current = -1;
return;
}
current = clicked;
$(".w50 p").eq(current).addClass("active").find("span").text("-");
$("#box p").eq(current).show();
}
$(document).ready(function() {
$(".w50 p").each(function(i, el) {
$(this).append($("<span>").text("+"));
$(this).click(function() {
handleClick(i);
});
});
$(".w50 p").eq(0).click();
});
.w50 {
width: 80%;
text-align: center;
}
.w50 p {
cursor: pointer
}
.w50 p.active {
color: orange
}
.w50 p span {
float: right;
width: 1em;
display: inline-block;
}
#box {
background-color: orange;
margin: 20px;
min-height: 6em;
}
#box p {
display: none;
padding: 1em
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w50">
<p>What paperwork do I need to complete to file for divorce?</p>
<p>How do I change my custody and support orders?</p>
</div>
<div id="box">
<p>Paperwork description</p>
<p>Custody description</p>
</div>

Full screen pop up window for multiple embedded videos

I'm new to js and I found a codepen that does exactly what I want to do except it currently only works for one embedded video.
What i am trying to achieve is the same but with 6 videos.
(function ($) {
'use strict';
$.fn.fitVids = function (options) {
var settings = {
customSelector: null,
ignore: null
};
if (!document.getElementById('fit-vids-style')) {
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
var head = document.head || document.getElementsByTagName('head')[0];
var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
var div = document.createElement("div");
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
head.appendChild(div.childNodes[1]);
}
if (options) {
$.extend(settings, options);
}
return this.each(function () {
var selectors = [
'iframe[src*="player.vimeo.com"]',
'iframe[src*="youtube.com"]',
'iframe[src*="youtube-nocookie.com"]',
'iframe[src*="kickstarter.com"][src*="video.html"]',
'object',
'embed'
];
if (settings.customSelector) {
selectors.push(settings.customSelector);
}
var ignoreList = '.fitvidsignore';
if (settings.ignore) {
ignoreList = ignoreList + ', ' + settings.ignore;
}
var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
$allVideos.each(function (count) {
var $this = $(this);
if ($this.parents(ignoreList).length > 0) {
return; // Disable FitVids on this video.
}
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) {
return;
}
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width')))) {
$this.attr('height', 9);
$this.attr('width', 16);
}
var height = (this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10)))) ? parseInt($this.attr('height'), 10) : $this.height(),
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
aspectRatio = height / width;
if (!$this.attr('id')) {
var videoID = 'fitvid' + count;
$this.attr('id', videoID);
}
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100) + '%');
$this.removeAttr('height').removeAttr('width');
});
});
};
// Works with either jQuery or Zepto
})(window.jQuery || window.Zepto);
// Init style shamelessly stolen from jQuery http://jquery.com
var Froogaloop = (function () {
// Define a local copy of Froogaloop
function Froogaloop(iframe) {
// The Froogaloop object is actually just the init constructor
return new Froogaloop.fn.init(iframe);
}
var eventCallbacks = {},
hasWindowEvent = false,
isReady = false,
slice = Array.prototype.slice,
playerDomain = '';
Froogaloop.fn = Froogaloop.prototype = {
element: null,
init: function (iframe) {
if (typeof iframe === "string") {
iframe = document.getElementById(iframe);
}
this.element = iframe;
// Register message event listeners
playerDomain = getDomainFromUrl(this.element.getAttribute('src'));
return this;
},
/*
* Calls a function to act upon the player.
*
* #param {string} method The name of the Javascript API method to call. Eg: 'play'.
* #param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method
* or callback function when the method returns a value.
*/
api: function (method, valueOrCallback) {
if (!this.element || !method) {
return false;
}
var self = this,
element = self.element,
target_id = element.id !== '' ? element.id : null,
params = !isFunction(valueOrCallback) ? valueOrCallback : null,
callback = isFunction(valueOrCallback) ? valueOrCallback : null;
// Store the callback for get functions
if (callback) {
storeCallback(method, callback, target_id);
}
postMessage(method, params, element);
return self;
},
/*
* Registers an event listener and a callback function that gets called when the event fires.
*
* #param eventName (String): Name of the event to listen for.
* #param callback (Function): Function that should be called when the event fires.
*/
addEvent: function (eventName, callback) {
if (!this.element) {
return false;
}
var self = this,
element = self.element,
target_id = element.id !== '' ? element.id : null;
storeCallback(eventName, callback, target_id);
// The ready event is not registered via postMessage. It fires regardless.
if (eventName != 'ready') {
postMessage('addEventListener', eventName, element);
} else if (eventName == 'ready' && isReady) {
callback.call(null, target_id);
}
return self;
},
/*
* Unregisters an event listener that gets called when the event fires.
*
* #param eventName (String): Name of the event to stop listening for.
*/
removeEvent: function (eventName) {
if (!this.element) {
return false;
}
var self = this,
element = self.element,
target_id = element.id !== '' ? element.id : null,
removed = removeCallback(eventName, target_id);
// The ready event is not registered
if (eventName != 'ready' && removed) {
postMessage('removeEventListener', eventName, element);
}
}
};
/**
* Handles posting a message to the parent window.
*
* #param method (String): name of the method to call inside the player. For api calls
* this is the name of the api method (api_play or api_pause) while for events this method
* is api_addEventListener.
* #param params (Object or Array): List of parameters to submit to the method. Can be either
* a single param or an array list of parameters.
* #param target (HTMLElement): Target iframe to post the message to.
*/
function postMessage(method, params, target) {
if (!target.contentWindow.postMessage) {
return false;
}
var url = target.getAttribute('src').split('?')[0],
data = JSON.stringify({
method: method,
value: params
});
if (url.substr(0, 2) === '//') {
url = window.location.protocol + url;
}
target.contentWindow.postMessage(data, url);
}
/**
* Event that fires whenever the window receives a message from its parent
* via window.postMessage.
*/
function onMessageReceived(event) {
var data, method;
try {
data = JSON.parse(event.data);
method = data.event || data.method;
} catch (e) {
//fail silently... like a ninja!
}
if (method == 'ready' && !isReady) {
isReady = true;
}
// Handles messages from moogaloop only
if (event.origin != playerDomain) {
return false;
}
var value = data.value,
eventData = data.data,
target_id = target_id === '' ? null : data.player_id,
callback = getCallback(method, target_id),
params = [];
if (!callback) {
return false;
}
if (value !== undefined) {
params.push(value);
}
if (eventData) {
params.push(eventData);
}
if (target_id) {
params.push(target_id);
}
return params.length > 0 ? callback.apply(null, params) : callback.call();
}
/**
* Stores submitted callbacks for each iframe being tracked and each
* event for that iframe.
*
* #param eventName (String): Name of the event. Eg. api_onPlay
* #param callback (Function): Function that should get executed when the
* event is fired.
* #param target_id (String) [Optional]: If handling more than one iframe then
* it stores the different callbacks for different iframes based on the iframe's
* id.
*/
function storeCallback(eventName, callback, target_id) {
if (target_id) {
if (!eventCallbacks[target_id]) {
eventCallbacks[target_id] = {};
}
eventCallbacks[target_id][eventName] = callback;
} else {
eventCallbacks[eventName] = callback;
}
}
/**
* Retrieves stored callbacks.
*/
function getCallback(eventName, target_id) {
if (target_id) {
return eventCallbacks[target_id][eventName];
} else {
return eventCallbacks[eventName];
}
}
function removeCallback(eventName, target_id) {
if (target_id && eventCallbacks[target_id]) {
if (!eventCallbacks[target_id][eventName]) {
return false;
}
eventCallbacks[target_id][eventName] = null;
} else {
if (!eventCallbacks[eventName]) {
return false;
}
eventCallbacks[eventName] = null;
}
return true;
}
/**
* Returns a domain's root domain.
* Eg. returns http://vimeo.com when http://vimeo.com/channels is sbumitted
*
* #param url (String): Url to test against.
* #return url (String): Root domain of submitted url
*/
function getDomainFromUrl(url) {
if (url.substr(0, 2) === '//') {
url = window.location.protocol + url;
}
var url_pieces = url.split('/'),
domain_str = '';
for (var i = 0, length = url_pieces.length; i < length; i++) {
if (i < 3) {
domain_str += url_pieces[i];
} else {
break;
}
if (i < 2) {
domain_str += '/';
}
}
return domain_str;
}
function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
}
function isArray(obj) {
return toString.call(obj) === '[object Array]';
}
// Give the init function the Froogaloop prototype for later instantiation
Froogaloop.fn.init.prototype = Froogaloop.fn;
// Listens for the message event.
// W3C
if (window.addEventListener) {
window.addEventListener('message', onMessageReceived, false);
}
// IE
else {
window.attachEvent('onmessage', onMessageReceived);
}
// Expose froogaloop to the global object
return (window.Froogaloop = window.$f = Froogaloop);
})();
////////////////////////////////////////
// Our Script
////////////////////////////////////////
$(document).ready(function () {
// Initiate FitVid.js
$(".containiframeCeleb2").fitVids();
$(".containiframeRiver2").fitVids();
$(".containiframeBach").fitVids();
$(".containiframeLouie").fitVids();
$(".containiframeRiver1").fitVids();
$(".containiframeCeleb1").fitVids();
$(".containiframe").fitVids();
// Iframe/player variables
var iframe = $('#videoCeleb1')[0];
var iframe = $('#videoRiver1')[0];
var iframe = $('#videoLouie')[0];
var iframe = $('#videoBach')[0];
var iframe = $('#videoRiver2')[0];
var iframe = $('#videoCeleb2')[0];
var iframe = $('#video')[0];
var player = $f(iframe);
// Open on play
$('.play').click(function () {
$('.content').css('left', 0)
$('.content').addClass('show')
player.api("play");
})
$('.playcelebrity1').click(function () {
$('.content').css('left', 0)
$('.content').addClass('show')
player.api("playcelebrity1");
})
$('.playcottage1').click(function () {
$('.content').css('left', 0)
$('.content').addClass('show')
player.api("playcottage1");
})
$('.playLouie').click(function () {
$('.content').css('left', 0)
$('.content').addClass('show')
player.api("playLouie");
})
$('.playbachelourette').click(function () {
$('.content').css('left', 0)
$('.content').addClass('show')
player.api("playbachelourette");
})
$('.playcottage2').click(function () {
$('.content').css('left', 0)
$('.content').addClass('show')
player.api("playcottage2");
})
$('.playcelbrity2').click(function () {
$('.content').css('left', 0)
$('.content').addClass('show')
player.api("playcelbrity2");
})
// Closes on click outside
$('.content').click(function () {
$('.content').removeClass('show')
setTimeout(function () {
$('.content').css('left', '-100%')
}, 300);
player.api("pause");
})
});
/* Lazy-man Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Fullscreen Section */
header {
width: 100%;
/* 100% height */
height: 100vh;
color: white;
background: #2980b9;
text-align: center;
padding: 20px;
/* Fancy flex-box centering */
display: flex;
align-items: center;
justify-content: center;
-webkit-display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
}
header h1 {
font-size: 40px;
font-family: 'Roboto';
font-weight: 700;
max-width: 700px;
margin-bottom: 10px;
}
header p {
font-family: 'Roboto Slab';
font-weight: 400;
font-size: 20px;
max-width: 700px;
margin-bottom: 20px;
opacity: .65;
}
.play {
background-image: url(https://img.youtube.com/vi/YDHFM2HmYe0/default.jpg);
display: block;
width: 120px;
height: 90px;
margin: 0 auto;
/* Important for :after */
position: relative;
}
.play:hover {
background: #333;
cursor: pointer;
}
.play:after {
position: absolute;
/* Centering */
/* CSS Triangle */
}
.playcelebrity1 {
background-image: url(https://img.youtube.com/vi/ebB0eoSY4yU/default.jpg);
display: block;
/* width: 500px;
height: 297px;*/
margin: 0 auto;
/* Important for :after */
position: relative;
}
.playcelebrity1:hover {
background: #333;
cursor: pointer;
}
.playcelebrity1:after {
position: absolute;
/* Centering */
/* CSS Triangle */
}
.playcottage1 {
background-image: url(https://img.youtube.com/vi/YDHFM2HmYe0/default.jpg);
display: block;
width: 120px;
height: 90px;
margin: 0 auto;
/* Important for :after */
position: relative;
}
.playcottage1:hover {
background: #333;
cursor: pointer;
}
.playcottage1:after {
position: absolute;
/* Centering */
/* CSS Triangle */
}
.playLouie {
background-image: url(https://img.youtube.com/vi/ol43MqHED9c/default.jpg);
display: block;
width: 120px;
height: 90px;
margin: 0 auto;
/* Important for :after */
position: relative;
}
.playLouie:hover {
background: #333;
cursor: pointer;
}
.playLouie:after {
position: absolute;
/* Centering */
/* CSS Triangle */
}
.playbachelourette {
background-image: url(https://img.youtube.com/vi/qXy5sCJj2wI/default.jpg);
display: block;
width: 120px;
height: 90px;
margin: 0 auto;
/* Important for :after */
position: relative;
}
.playbachelourette:hover {
background: #333;
cursor: pointer;
}
.playbachelourette:after {
position: absolute;
/* Centering */
/* CSS Triangle */
}
.playcottage2 {
background-image: url(https://img.youtube.com/vi/7OeoQqPqxBg/default.jpg);
display: block;
width: 120px;
height: 90px;
margin: 0 auto;
/* Important for :after */
position: relative;
}
.playcottage2:hover {
background: #333;
cursor: pointer;
}
.playcottage2:after {
position: absolute;
/* Centering */
/* CSS Triangle */
}
.playcelbrity2 {
background-image: url(https://img.youtube.com/vi/lk9tse44BMc/default.jpg);
display: block;
width: 120px;
height: 90px;
margin: 0 auto;
/* Important for :after */
position: relative;
}
.playcelbrity2:hover {
background: #333;
cursor: pointer;
}
.playcelbrity2:after {
position: absolute;
/* Centering */
/* CSS Triangle */
}
/* Fullscreen Overlay */
.content {
width: 100%;
height: 100vh;
/* 50% opacity black */
background: rgba(0, 0, 0, .5);
/* Stays locked on scroll */
position: fixed;
/* On top of the rest*/
z-index: 2;
/* Hidden */
opacity: 0;
/* No interference */
left: -100%;
/* CSS3 Transition */
transition: opacity .5s;
-webkit-transition: opacity .5s;
}
/* 90% width container */
.containiframeCeleb2 {
width: 90%;
/* Centering */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.containiframeRiver2 {
width: 90%;
/* Centering */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.containiframeLouie {
width: 90%;
/* Centering */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.containiframeCeleb1 {
width: 90%;
/* Centering */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.containiframe {
width: 90%;
/* Centering */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.close {
width: 20px;
fill: white;
position: absolute;
right: 0;
/* Bring above video */
top: -30px;
}
.close:hover {
/* 50% opacity white */
fill: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
/* Class to fade in overlay */
.show {
opacity: 1;
}
<title>FullScreen Vimeo Popup with Autoplay and CSS3 Transitions</title>
<body>
<div class="content">
<!--End of the new-->
<div class="containiframeCeleb2">
<!-- SVG Close (X) Icon -->
<svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
<!-- Embedded video -->
<iframe id="videoCeleb2" src="https://www.youtube.com/embed/lk9tse44BMc?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="containiframeRiver2">
<!-- SVG Close (X) Icon -->
<svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
<!-- Embedded video -->
<iframe id="videoRiver2" src="https://www.youtube.com/embed/7OeoQqPqxBg?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="containiframeBach">
<!-- SVG Close (X) Icon -->
<svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
<!-- Embedded video -->
<iframe id="videoBach" src="https://www.youtube.com/embed/qXy5sCJj2wI?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="containiframeLouie">
<!-- SVG Close (X) Icon -->
<svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
<!-- Embedded video -->
<iframe id="videoLouie" src="https://www.youtube.com/embed/ol43MqHED9c?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="containiframeRiver1">
<!-- SVG Close (X) Icon -->
<svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
<!-- Embedded video -->
<iframe id="videoRiver1" src="https://www.youtube.com/embed/YDHFM2HmYe0?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="containiframeCeleb1">
<!-- SVG Close (X) Icon -->
<svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
<!-- Embedded video -->
<iframe id="videoCeleb1" src="https://www.youtube.com/embed/ebB0eoSY4yU?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="containiframe">
<!-- SVG Close (X) Icon -->
<svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
<!-- Embedded video -->
<iframe id="video" src="https://www.youtube.com/embed/YDHFM2HmYe0?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<header>
<div>
<span class="play"> </span>
</div>
<div>
<span class="playcelebrity1"> </span>
</div>
<div>
<span class="playcottage1"> </span>
</div>
<div>
<span class="playLouie"> </span>
</div>
<div>
<span class="playbachelourette"> </span>
</div>
<div>
<span class="playcottage2"> </span>
</div>
<div>
<span class="playcelbrity2"> </span>
</div>
</header>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Here is my progress so far (jsfiddle)

I had a project which I should embed multi videos. this is how I done it :
I used Bootstrap modal :
<div id="videoModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<iframe id="videoIframe" class="full-width height-480"
src="https://www.youtube.com/watch?v=UM-ZPAF2Dpw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
add this one only once, and in your button pass the youtube video ID like this :
<button onclick="showVideo('UM-ZPAF2Dpw')"><span class="glyphicon glyphicon-triangle-right"></span> Show Video 1</button>
you can have as many as button you like with different video ID
and in your script file you need to have this :
function showVideo(youtubeID){
var url = 'https://www.youtube.com/embed/' + youtubeID
document.getElementById('videoIframe').src = url;
// Get the modal
var modal = document.getElementById('videoModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
modal.style.display = "block";
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
document.getElementById('videoIframe').src = '';
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
document.getElementById('videoIframe').src = '';
}
}
}