In the snippet, I have a Wistia embedded video loading via lazyload. With autoPlay=true, I'm unable to have the video unmuted when it starts playing.
muted=false doesn't seem to work as described in the docs here.
Any ideas on how to have it unmuted while autoPlay is true?
(function () {
const wistia = document.querySelectorAll(".wistia");
for (let i = 0; i < wistia.length; i++) {
let source = `https://embed-ssl.wistia.com/deliveries/${wistia[i].dataset.thumb}.jpg`
let image = new Image();
image.src = source;
image.addEventListener("load", (function () {
wistia[i].appendChild(image);
})(i)
);
wistia[i].addEventListener("click", function () {
let iframe = document.createElement("iframe");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("mozallowfullscreen", "");
iframe.setAttribute("webkitallowfullscreen", "");
iframe.setAttribute("oallowfullscreen", "");
iframe.setAttribute("msallowfullscreen", "");
iframe.setAttribute('src', `//fast.wistia.net/embed/iframe/${this.dataset.embed}?videoFoam=true&autoPlay=true`);
this.innerHTML = "";
this.appendChild(iframe);
});
}
})();
.wistia {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.wistia img {
width: 100%;
top: 0; /* Change this for different ratio than 16:9 */
left: 0;
// opacity: 0.7;
}
.wistia .play-button {
width: 90px;
height: 60px;
background-color: #333;
// box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
// opacity: 0.8;
border-radius: 6px;
}
.wistia .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.wistia img,
.wistia .play-button {
cursor: pointer;
}
.wistia img,
.wistia iframe,
.wistia .play-button,
.wistia .play-button:before {
position: absolute;
}
.wistia .play-button,
.wistia .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.wistia iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
<div class="wistia" data-embed="fousa0gqve" data-thumb="772ba38639a8dd752968933b95e3a7282f4d6a7b">
<div class="play-button"></div>
</div>
;
(function($) {
class Popup {
constructor(options, elem) {
var self = this;
var defaultPopupMenu = `<div>
<i id="faInfo" class="fa fa-info"></i>
<i id="faQuest" class="fa fa-question"></i>
<i id="faLink" class="fa fa-external-link"></i>
</div>`;
this.defaultOptions = {
content: defaultPopupMenu, //this option MUST be set when new options passed through, or only the default menu will show
position: "top", //where the popup will show by default- top. Other options: right, bottom, or left
theme: "popupTheme", //Menu Element theme. Defaults to popupTheme, but custom class can be set instead
style: "", //Popup Menu Style. Default no style, will revert to default colours. Other options: Blue, Red, Green, Custom
animation: "standard", //Standard animation by default. Other options: flip, grow, bounce
event: "click", //Default set to "click", can also be set to hover
hideOnClick: true, //When true, clicking off the menu closes it. When false, only clicking on the menu closes it
zIndex: 100, //Individual z-index can be set for each menu for layering if necessary
//function to handle actions when clicking on popup menu icons. MUST be set when options are passed through or an error or default menu actions will occur
popItemClick: function(globalthis) {
//Default actions
var twentyEightSpaces = `
`;
var twentyFourSpaces = `
`;
var eightSpaces = ` `;
var sixteenSpaces = `
`;
var content;
var container = $(event.target).attr("id");
switch (container) {
case "faInfo":
content = {
type: "info",
heading: "Information",
text: `<p>To set a new menu when calling .popup() on an element,
you must set a variable that holds a string with the html for that menu, then
pass that variable through as the "content" part of the options. For example: </p>
<p>var myMenu = '<div>\ <br />
${twentyEightSpaces}<a href="#''><i id="faInfo" class="fa fa-info"></i></a>\<br />
${twentyFourSpaces}</div>'; </p>
<p>would create a menu with one item, and just add more '<a>' tags with icons inside the '<div>' tags to add more menu items. </p>
<p>Then add it to the content when calling the popup: </p>
<p>$("#myPopUp").popup({ <br />
${eightSpaces}content: myMenu, <br />
${eightSpaces}popItemClick(globalthis) { <br />
${sixteenSpaces}...new actions here... <br />
${eightSpaces}} <br />
});</p>
<p>You must set new actions in the "popItemClick" function for your menu
in the options you pass or it will throw an error.</p>`
}
globalthis.alertBox(content);
break;
case "faQuest":
content = {
type: "info",
heading: "Question",
text: `<p>Why is this being shown?</p>
<p>Because you need to set a popup menu of your own (and the popItemClick() function) or you get this default menu.</p>
<p>If you set the popup menu but don't change the popItemClick() function, you will get an error.</p>
<p>Click the "i" button for more info.</p>`
}
globalthis.alertBox(content);
break;
case "faLink":
window.open("http://example.com/");
break;
default:
content = {
type: "danger",
heading: "Error",
text: `<p>Error! You have set a new menu without changing the 'popItemClick' function.
The 'popItemClick' function must be set to new menu actions.</p>`
}
globalthis.alertBox(content);
}
}
}
this.elem = elem;
this.$elem = $(elem);
this.options = $.extend({}, this.defaultOptions, options);
if (!this.$elem.hasClass(this.options.theme)) {
this.$elem.addClass(this.options.theme);
}
this.init();
}
init() {
this.popup = $('<div class="pop-cont" />')
.addClass('pop-' + this.options.position)
.addClass('popupTheme' + this.options.style)
.append('<div class="pop-items" />')
.appendTo('body').css("opacity", 0).hide();
this.setContent();
this.setTriggers();
}
setContent() {
var self = this;
var location = this.popup.find(".pop-items");
var content;
if ((this.options.position == 'top') || (this.options.position == 'bottom')) {
content = $(this.options.content).find("a").addClass("pop-item");
location.html(content);
this.popup.find("i").first().addClass("leftBorder");
this.popup.find("i").last().addClass("rightBorder");
} else if ((this.options.position == 'left') || (this.options.position == 'right')) {
content = $(this.options.content).find("a").addClass("pop-item").addClass('item-side');
location.html(content);
this.popup.find("i").first().addClass("topBorder");
this.popup.find("i").last().addClass("bottomBorder");
}
//popItemClick callback****************************************
location.find('.pop-item').on('click', function(event) {
event.preventDefault();
self.options.popItemClick.call(this, self);
});
}
setTriggers() {
var self = this;
if (this.options.event === 'click') {
this.$elem.on('click', function(event) {
event.preventDefault();
if (self.$elem.hasClass('pressed')) {
self.pophide();
} else {
self.popshow();
}
});
}
if (this.options.event === 'hover') {
this.$elem.on('mouseenter', function(event) {
setTimeout(function() {
self.popshow();
self.popup = $(self.popup[0]);
}, 250);
});
$(this.popup).on('mouseleave', function(event) {
setTimeout(function() {
self.pophide();
}, 1000);
});
}
if (this.options.hideOnClick === true) {
$('html').on('click.popup', function(event) {
if (event.target != self.elem && self.$elem.has(event.target).length === 0 &&
self.popup.has(event.target).length === 0 && self.popup.is(":visible")) {
self.pophide();
}
});
}
}
pophide() {
var self = this;
var animation = {
opacity: 0
};
this.$elem.removeClass('pressed');
switch (this.options.position) {
case 'top':
animation.top = '+=20';
break;
case 'left':
animation.left = '+=20';
break;
case 'right':
animation.left = '-=20';
break;
case 'bottom':
animation.top = '-=20';
break;
}
this.popup.animate(animation, 200, function() {
self.popup.hide();
});
}
popshow() {
this.$elem.addClass('pressed');
this.setPosition();
this.popup.show().css({
opacity: 1
}).addClass('animate-' + this.options.animation);
}
setPosition() {
var self = this;
this.coords = this.$elem.offset();
var x = this.coords.left;
var y = this.coords.top;
var popWidth = this.popup.width();
var popHeight = this.popup.height();
var adjLeft = popWidth / 2;
var adjTop = popHeight / 2;
this.testy = $('<div class="test" />')
.css({
display: 'inline-block',
margin: '0px',
padding: '0px'
})
.appendTo('body');
var measure = this.$elem.clone().css({
padding: "0px",
margin: "0px"
});
var loc = this.testy;
loc.html(measure);
var textWidth = this.testy.width();
var textHeight = this.testy.height();
this.testy.remove();
var adjMenuWidth = textWidth / 2;
var adjMenuHeight = textHeight / 2;
var up = y - (popHeight + 7);
var down = y + textHeight;
if (this.popup.hasClass('pop-top')) {
this.popup.css({
top: up + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-bottom')) {
this.popup.css({
top: (down + 7) + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-left')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x - popWidth - 2) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-right')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x + textWidth + 12) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
}
alertBox(content) {
var self = this;
var myAlert = `<div id="alertBox" class="alert">
<div class="alert-content">
<div class="alert-header">
<h2></h2>
</div>
<div class="alert-body"></div>
<div class="alert-footer">
<button class="alert-close">OK</button>
</div>
</div>
</div>`;
$('body').append(myAlert);
this.alert = $('#alertBox');
this.header = this.alert.find('div.alert-header');
this.heading = this.header.find('h2');
this.alertBody = this.alert.find('div.alert-body');
this.footer = this.alert.find('div.alert-footer');
this.close = this.footer.find('button.alert-close');
this.heading.append(content.heading);
this.alertBody.append(content.text);
switch (content.type) {
case "info":
this.header.addClass("info");
this.footer.addClass("info");
this.close.addClass("info");
break;
case "success":
this.header.addClass("success");
this.footer.addClass("success");
this.close.addClass("success");
break;
case "danger":
this.header.addClass("danger");
this.footer.addClass("danger");
this.close.addClass("danger");
break;
case "warning":
this.header.addClass("warning");
this.footer.addClass("warning");
this.close.addClass("warning");
break;
default:
break;
}
this.alert.show();
var closeBtn = $("button.alert-close");
closeBtn.on("click", function() {
self.alert.remove();
});
$(document).on("click", function(event) {
event.preventDefault();
if (event.target == self.alert[0]) {
self.alert.remove();
}
});
}
};
//Set $.fn.popup so it returns an instance of the Popup class when called*******************************
$.fn.popup = function(options) {
return this.each(function() {
var popobject = new Popup(options, this);
});
};
}(jQuery));
/*jshint multistr: true */
//this is a sample .js file that shows how you might set up the popup menus
;
(function($) {
$(document).ready(function() {
$('#defaultTest').popup();
});
}(jQuery));
/*Default theme**************/
.popupTheme {
background-color: #333;
background-size: 100% 100%;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0;
position: relative;
box-shadow: 5px 5px 3px #888;
z-index: 1;
float: left;
margin: 5px;
cursor: pointer;
}
.popupTheme i,
.popupThemeRed i,
.popupThemeBlue i,
.popupThemeGreen i,
.popupThemeCustom i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 10px;
background-size: 100% 100%;
cursor: pointer;
}
.popupTheme i:hover {
background-color: #4d4d4d;
}
.pop-cont.pop-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: #333 transparent transparent transparent;
z-index: 100;
}
.pop-cont.pop-bottom::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #333 transparent;
z-index: 100;
}
.pop-cont.pop-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent transparent #333;
z-index: 100;
}
.pop-cont.pop-right::before {
content: "";
position: absolute;
top: 50%;
left: -14px;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent #333 transparent transparent;
z-index: 100;
}
.pop-cont {
margin: auto;
position: relative;
display: block;
cursor: pointer;
border-radius: 6px;
box-shadow: 5px 5px 3px #888;
}
.pop-cont,
.pop-item,
.popupTheme {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*Individual menu item*/
.pop-item {
height: 100%;
display: block;
width: 20px;
height: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
float: left;
}
.item-side {
float: none !important;
}
.pop-item i {
margin: -10px 0 0 -10px;
}
.pop-top {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
}
.pop-bottom {
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
}
.pop-left {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.pop-right {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.animate-standard {
animation: animateStandard 0.3s 1 ease;
-webkit-animation: animateStandard 0.3s 1 ease;
}
#-webkit-keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.animate-grow {
animation: animateGrow 0.4s 1 ease;
-webkit-animation: animateGrow 0.4s 1 ease;
}
#-webkit-keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
#keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
.animate-flip {
animation: animateFlip 0.4s 1 ease;
-webkit-animation: animateFlip 0.4s 1 ease;
}
#-webkit-keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
#keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
.leftBorder {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rightBorder {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.bottomBorder {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.topBorder {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.hidden {
display: none !important;
}
.clear {
clear: both;
}
/* The Alert Box (background) */
.alert {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1001;
/* Sit on top */
padding-top: 250px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
}
.alert-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
max-width: 700px;
min-width: 300px;
/*width settings for different browsers. Note that these won't work at all for IE and versions of Edge before v79*/
width: fit-content;
/*works in chrome and opera*/
width: -moz-fit-content;
/*works for firefox */
width: -webkit-fit-content;
/*works for Edge v79 and up*/
width: -ms-fit-content;
width: -o-fit-content;
}
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.alert-header,
.alert-header.info {
padding: 2px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
.alert-header.success {
background-color: #00cc1b;
}
.alert-header.danger {
background-color: #ff0000;
}
.alert-header.warning {
background-color: #f7931e;
}
.alert-body {
padding: 2px 16px;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #000;
min-height: 40px;
}
.alert-footer,
.alert-footer.info {
padding: 15px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 0px 0px 5px 5px;
text-align: center;
}
.alert-footer.success {
background-color: #00cc1b;
}
.alert-footer.danger {
background-color: #ff0000;
}
.alert-footer.warning {
background-color: #f7931e;
}
.alert-close,
.alert-close.info {
padding: 5px 15px;
border-radius: 3px;
border: 0;
background-color: #fff;
color: #02baf2;
font-weight: bold;
box-shadow: 5px 5px 10px #666;
}
.alert-close.success {
color: #00cc1b;
}
.alert-close.danger {
color: #ff0000;
}
.alert-close.warning {
color: #f7931e;
}
.alert-close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.alert-close:focus {
outline: none;
}
body {
font-family: Helvetica, sans-serif;
}
.displayBox {
background-color: #efefef;
padding: 0px 0px 30px 0px;
display: inline-block;
width: 100%;
}
.header {
text-align: center;
font-size: 12px;
border-bottom: 1px solid #fff;
width: 100%;
color: #fff;
background-color: #130e5a;
}
.header h1 {
margin: 0px;
padding: 5px 0px;
}
div.icon-box-top {
margin: 50px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
div.icon-box {
margin: 25px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
p.icon-text,
p.menuText {
display: block;
margin-left: 45px;
margin-bottom: 0px;
float: left;
}
p.menuText {
margin-left: 20px !important;
margin-top: 0px;
}
.textPopup {
/*When attaching popups to text menus, style text menu separately*/
display: block;
font-size: 28px;
font-weight: bold;
color: #130e5a;
margin: 0px 0px 0px 75px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
float: left;
z-index: 1;
}
p.textPopup.pressed {
color: #02baf2 !important;
}
div#myPopUp,
div#myPopUp2,
div#myPopUp3,
div#myPopUp4 {
margin-left: 75px;
display: inline-block;
}
i.swIcon {
font-size: 208px !important;
margin: 10px;
}
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
I have an example I'm working from which works fine. When I duplicate that code in my app, the icon looks too small and off center.
Here is how it is supposed to look, per example:
Here is how it looks when I enter the same code:
It is smaller and the cog is off center.
Here is the example's html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here is my html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here are the example's dependencies:
<link rel="stylesheet" type="text/css" href="styles/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="styles/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="scripts/Popup-plugin.js"></script>
<script src="scripts/Example.js"></script>
Here are my dependencies:
<link rel="stylesheet" type="text/css" href="css/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="js/Popup-plugin.js"></script>
<script src="js/Example.js"></script>
The only difference that I can see is he stores his javascript in scripts folder and mine is in js folder. And he stores his css in styles folder whereas mine is in css folder.
The javascript is the same too:
$('#defaultTest').popup();
Any ideas?
I finally found the problem. There was a bootstrap css library that was interfering with the Popup-plugin css. But now my bootstrap tabs don't work and I'll have to spend additional time looking at different versions of it, or replacing the tabs with something else. I figured there was a css conflict somewhere but it took me all day to find it. This has happened to me before and it is a painful and time-consuming process to isolate the problem and fix it. If anyone has suggestions of tools or techniques for speeding up this process, please leave comments below for everyone reading this to benefit.
I am working on a touchscreen video kiosk coding in javascript and CSS and HTML. I have some code that works pretty well thanks to a post by zer00ne. I have 4 videos on the page with custom controls for play and fullscreen. When I fullscreen a video I can still see the Custom controls of every other video behind it. Im not sure why but I can see that these values may have something to do with it:
video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar1 { z-index: 2147483647; }
.vidBar2 { z-index: 2147483647; }
.vidBar3 { z-index: 2147483647; }
.vidBar4 { z-index: 2147483647; }
I am not a programmer by any means and I have struggled a lot just to get this this far with a lot of "borrowed" code.
What I would like to do is set the above values to 2147483646 and then on the event listener for the fullscreen button for each video have the z-index for the custom controls on that video increased by 1 on fullscreen and decreased by 1 when full screen exits. In short when 1 video is fullscreen I dont want to see anything but that video and its custom controls.
Im not even sure if thats how it "should" be done but I'd like to get this project done as I have a limited time left to work on it and that is the last thing that is not working. Please see the entire code here and thank you so much in advance:`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PowerHouse-VideoKiosk</title>
<style>
.vidFrame1 { position: absolute; top: 10%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame2 { position: absolute; top: 10%; left: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame3 { position: absolute; top: 50%; left: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame4 { position: absolute; top: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidBar1 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar2 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar3 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar4 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
#fullScreen1 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen2 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen3 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen4 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen1:hover { border: 1px groove #0ef; }
#fullScreen2:hover { border: 1px groove #0ef; }
#fullScreen3:hover { border: 1px groove #0ef; }
#fullScreen4:hover { border: 1px groove #0ef; }
.on1, .off1 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on2, .off2 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on3, .off3 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on4, .off4 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.off1 { background-position: 0 0 }
.off2 { background-position: 0 0 }
.off3 { background-position: 0 0 }
.off4 { background-position: 0 0 }
.on1 { background-position: -1px -50px }
.on2 { background-position: -1px -50px }
.on3 { background-position: -1px -50px }
.on4 { background-position: -1px -50px }
#playPause1 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause2 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause3 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause4 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause1.play1:before { content: '\25b6'; }
#playPause1.pause1:before { content: '\275a\275a'; }
#playPause2.play2:before { content: '\25b6'; }
#playPause2.pause2:before { content: '\275a\275a'; }
#playPause3.play3:before { content: '\25b6'; }
#playPause3.pause3:before { content: '\275a\275a'; }
#playPause4.play4:before { content: '\25b6'; }
#playPause4.pause4:before { content: '\275a\275a'; }
.vid1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid4 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
/*
Fullscreen Pseudo-class:
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
*/
.vidBar1:-moz-full-screen { position: fixed; }
.vidBar1:-webkit-full-screen { position: fixed; }
.vidBar1:-ms-fullscreen { position: fixed; }
.vidBar1:fullscreen { position: fixed; }
.vidBar2:-moz-full-screen { position: fixed; }
.vidBar2:-webkit-full-screen { position: fixed; }
.vidBar2:-ms-fullscreen { position: fixed; }
.vidBar2:fullscreen { position: fixed; }
.vidBar3:-moz-full-screen { position: fixed; }
.vidBar3:-webkit-full-screen { position: fixed; }
.vidBar3:-ms-fullscreen { position: fixed; }
.vidBar3:fullscreen { position: fixed; }
.vidBar4:-moz-full-screen { position: fixed; }
.vidBar4:-webkit-full-screen { position: fixed; }
.vidBar4:-ms-fullscreen { position: fixed; }
.vidBar4:fullscreen { position: fixed; }
/*
Special Shadow DOM Settings to Override Default Controls:
https://css-tricks.com/custom-controls-in-html5-video-full-screen/
*/
video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar1 { z-index: 2147483647; }
.vidBar2 { z-index: 2147483647; }
.vidBar3 { z-index: 2147483647; }
.vidBar4 { z-index: 2147483647; }
</style>
</head>
<body>
<figure class="vidFrame1">
<video id="vid1" class="vid1" autoplay muted loop src="Bill_Nye_the_Science_Guy_S01E18_Electricity.mp4"></video>
<figcaption class="vidBar1">
<button id='playPause1' class="play1" title="Play/Pause Video"></button>
<button id='fullScreen1' class="on1" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<figure class="vidFrame2">
<video id="vid2" class="vid2" autoplay muted loop src="Tesla'sWardenclyffeTowerandLab(3D Model).mp4"></video>
<figcaption class="vidBar2">
<button id='playPause2' class="play2" title="Play/Pause Video"></button>
<button id='fullScreen2' class="on2" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
</figure>
<figure class="vidFrame3">
<video id="vid3" class="vid3" autoplay muted loop src="IntroductiontoElectricity.mp4"></video>
<figcaption class="vidBar3">
<button id='playPause3' class="play3" title="Play/Pause Video"></button>
<button id='fullScreen3' class="on3" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<figure class="vidFrame4">
<video id="vid4" class="vid4" autoplay muted loop src="FirstElectricBulbsbyThomasEdison.mp4"></video>
<figcaption class="vidBar4">
<button id='playPause4' class="play4" title="Play/Pause Video"></button>
<button id='fullScreen4' class="on4" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<script>
/*
Toggle Button with classList:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
*/
var fullBtn1 = document.getElementById('fullScreen1');
var playBtn1 = document.getElementById('playPause1');
var fullBtn2 = document.getElementById('fullScreen2');
var playBtn2 = document.getElementById('playPause2');
var fullBtn3 = document.getElementById('fullScreen3');
var playBtn3 = document.getElementById('playPause3');
var fullBtn4 = document.getElementById('fullScreen4');
var playBtn4 = document.getElementById('playPause4');
playBtn1.addEventListener('click', function(event) {
var player1 = document.getElementById('vid1');
if(player1.paused) {
playBtn1.classList.remove('play1');
playBtn1.classList.add('pause1');
player1.play();
} else {
playBtn1.classList.add('play1');
playBtn1.classList.remove('pause1');
player1.pause();
}
}, false);
playBtn2.addEventListener('click', function(event) {
var player2 = document.getElementById('vid2');
if(player2.paused) {
playBtn2.classList.remove('play2');
playBtn2.classList.add('pause2');
player2.play();
} else {
playBtn2.classList.add('play2');
playBtn2.classList.remove('pause2');
player2.pause();
}
}, false);
playBtn3.addEventListener('click', function(event) {
var player3 = document.getElementById('vid3');
if(player3.paused) {
playBtn3.classList.remove('play3');
playBtn3.classList.add('pause3');
player3.play();
} else {
playBtn3.classList.add('play3');
playBtn3.classList.remove('pause3');
player3.pause();
}
}, false);
playBtn4.addEventListener('click', function(event) {
var player4 = document.getElementById('vid4');
if(player4.paused) {
playBtn4.classList.remove('play4');
playBtn4.classList.add('pause4');
player4.play();
} else {
playBtn4.classList.add('play4');
playBtn4.classList.remove('pause4');
player4.pause();
}
}, false);
fullBtn1.addEventListener('click', function(event) {
var tgtEle1 = document.querySelector('.vid1');
var onOrOff1 = fullBtn1.classList.contains('on1');
if (onOrOff1) {
enterFS(tgtEle1);
fullBtn1.classList.remove('on1');
fullBtn1.classList.add('off1');
vid1.muted = false;
vid1.currentTime = 0;
} else {
exitFS();
fullBtn1.classList.add('on1');
fullBtn1.classList.remove('off1');
vid1.muted = true;
vid1.currentTime = 0;
}
}, false);
fullBtn2.addEventListener('click', function(event) {
var tgtEle2 = document.querySelector('.vid2');
var onOrOff2 = fullBtn2.classList.contains('on2');
if (onOrOff2) {
enterFS(tgtEle2);
fullBtn2.classList.remove('on2');
fullBtn2.classList.add('off2');
vid2.muted = false;
vid2.currentTime = 0
} else {
exitFS();
fullBtn2.classList.add('on2');
fullBtn2.classList.remove('off2');
vid2.muted = true;
vid2.currentTime = 0
}
}, false);
fullBtn3.addEventListener('click', function(event) {
var tgtEle3 = document.querySelector('.vid3');
var onOrOff3 = fullBtn3.classList.contains('on3');
if (onOrOff3) {
enterFS(tgtEle3);
fullBtn3.classList.remove('on3');
fullBtn3.classList.add('off3');
vid3.muted = false;
vid3.currentTime = 0
} else {
exitFS();
fullBtn3.classList.add('on3');
fullBtn3.classList.remove('off3');
vid3.muted = true;
vid3.currentTime = 0
}
}, false);
fullBtn4.addEventListener('click', function(event) {
var tgtEle4 = document.querySelector('.vid4');
var onOrOff4 = fullBtn4.classList.contains('on4');
if (onOrOff4) {
enterFS(tgtEle4);
fullBtn4.classList.remove('on4');
fullBtn4.classList.add('off4');
vid4.muted = false;
vid4.currentTime = 0
} else {
exitFS();
fullBtn4.classList.add('on4');
fullBtn4.classList.remove('off4');
vid4.muted = true;
vid4.currentTime = 0
}
}, false);
/*
Fullscreen API:
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
*/
function enterFS(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
function exitFS() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
</script>
</body>
</html>
`
I really hate he amount of duplicate code in here... nevertheless here is what you need to do. The .vidBar classes you identified are the issue. They are always on a much higher z-index than everything else. You don't notice it though until you open the video at fullscreen. What you want to do is onl apply the high z-index to the opened video. So to do that we need to toggle a new class that is added and then removed when it is opened/closed.
.vidBar1.open { z-index: 2147483647; }
.vidBar2.open { z-index: 2147483647; }
.vidBar3.open { z-index: 2147483647; }
.vidBar4.open { z-index: 2147483647; }
and in your JS do this:
if (onOrOff1) {
enterFS(tgtEle1);
fullBtn1.classList.remove('on1');
fullBtn1.classList.add('off1');
fullBtn1.parentElement.classList.add('open');
vid1.muted = false;
vid1.currentTime = 0;
} else {
exitFS();
fullBtn1.classList.add('on1');
fullBtn1.classList.remove('off1');
fullBtn1.parentElement.classList.remove('open');
vid1.muted = true;
vid1.currentTime = 0;
}
Note, this is the new part:
fullBtn1.parentElement.classList.add('open');
...
fullBtn1.parentElement.classList.remove('open');
Do that for all four, make sure you update the class name as you update each.
So the high z-index class targets the video caption, which is the parent element of the full-screen button.
https://codepen.io/partypete25/pen/gRxPYo?editors=0110
Good luck.
I have a bug with my HTML5 Video player where the replay button shows at the start. I want to show the play button and not the replay. The replay button seems to be functioning properly, just doesn't hide at start.
CSS
.video-wrapper {
position: relative;
max-width: 680px;
}
.video-wrapper > video {
width: 100%;
max-width: 100%;
box-sizing: border-box;
vertical-align: middle;
cursor: pointer;
}
/* Hide iOS Play Button */
video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
.playButton {
border-radius: 100px;
border: 8px solid #fff !important;
height: 100px;
position: absolute;
width: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 400ms;
}
.playButton:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
left: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.replayButton {
border-radius: 100px;
border: 8px solid #fff !important;
height: 100px;
position: absolute;
width: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 150ms;
}
.replayButton:before {
height: 45px;
width: 45px;
position: absolute;
top: 18px;
left: 18px;
content: '';
display: block;
border-color: transparent white white white;
border-radius: 50%;
border-style: solid;
border-width: 8px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.replayButton:after {
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 0 45px 22px 22px;
height: 0;
position: absolute;
top: 40px;
left: 15px;
bottom: 0;
right: 0;
width: 0;
content: "";
display: block;
margin: auto;
}
HTML
<div class="video-wrapper">
<video id="bVideo">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
<div class="replayButton" id="replayButton" onclick="playPause()"></div>
</div>
Script
var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
var replay = document.getElementById("replayButton");
function playPause() {
if (bunnyVideo.paused)
{
bunnyVideo.play();
el.className = "";
replay.className = "";
}
else
{
bunnyVideo.pause();
el.className = "playButton";
replay.className = "";
}
}
function playPauseControls() {
if (!bunnyVideo.paused) {
el.className ="";
replay.className = "";
} else {
el.className = "playButton";
replay.className = "";
}
}
function videoEnd() {
replay.className = "replayButton";
el.className = "";
bunnyVideo.setAttribute("controls","controls");
}
function showControls(){
bunnyVideo.setAttribute("controls","controls");
}
function hideControls(){
bunnyVideo.removeAttribute("controls","controls");
}
bunnyVideo.addEventListener("click", playPause, false);
bunnyVideo.addEventListener("play", playPauseControls, false);
bunnyVideo.addEventListener("pause", playPauseControls, false);
bunnyVideo.addEventListener("mouseover", showControls, false);
bunnyVideo.addEventListener("mouseout", hideControls, false);
playButton.addEventListener("mouseover", showControls, false);
replay.addEventListener("mouseover", showControls, false);
bunnyVideo.addEventListener("ended", videoEnd, false);
https://jsfiddle.net/prpzv8wh/
Set the div to invisible when you start your javascript:
var replay = document.getElementById("replayButton");
replay.style.visibility = "hidden";
Then in the replay call back set it to visible:
function videoEnd() {
replay.className = "replayButton";
replay.style.visibility = "visible";
el.className = "";
bunnyVideo.setAttribute("controls","controls");
}
I've been working on placing a javascript magnifying glass on site.
I need help positioning the images in a straight horizontal line, right next to each other, with no white space in between. Setup must also be centered in middle of page.
Like this: http://s17.postimg.org/6nwizreov/Screenshot.png
Code: http://jsfiddle.net/NightSpark/dtsqcpv8/
(The two js files and css are from magnifier.js, by Mark Rolich)
Thanks
.magnifier-thumb-wrapper {
position: relative;
display: block;
top: 0;
left: 0
}
.magnifier-lens {
position: absolute;
border: solid 1px #ccc;
z-index: 1000;
top: 0;
left: 0;
overflow: hidden
}
.magnifier-loader {
position: absolute;
top: 0;
left: 0;
border: solid 1px #ccc;
color: #fff;
text-align: center;
background: transparent;
background: rgba(50, 50, 50, 0.5);
z-index: 1000;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)
}
.magnifier-loader-text {
font: 13px Arial;
margin-top: 10px
}
.magnifier-large {
position: absolute;
z-index: 100
}
.magnifier-preview {
padding: 0;
width: 100%;
height: 150px;
position: relative;
overflow: hidden
}
.magnifier-preview img {
position: absolute;
top: 0;
left: 0
}
.opaque {
opacity: .5;
filter: alpha(opacity=50);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
}
.hidden {
display: none
}
demo - http://jsfiddle.net/dtsqcpv8/2/
adding this you can center it replace body with the parent of the element
body{
text-align:center;
}
.cont{
display:inline-block;
}