I´m trying to play my local video on the image click, but somehow, the video does not play. It shows the video "box", but the video wont play. Any ideas how to make the video play after clicking the image?
Thanks a lot!
HTML part: Suppose there is video in each img div - for this example, I included only 1 video
<div class="container-gallery" id="portfolio">
<h1>Portfolio gallery</h1>
<div class="wrapper-gallery" id="index-gallery">
<div class="gallery-img img1">
<div>First image</div>
<video class="hidden" width="1000" controls>
<source src="../video/#6.mp4" type="video/mp4">
</video>
</div>
<div class="gallery-img img2">
<div>Second image</div>
</div>
<div class="gallery-img img3">
<div>Third image</div>
</div>
<div class="gallery-img img4">
<div>Fourth image</div>
</div>
<div class="gallery-img img5">
<div>Fifth image</div>
</div>
<div class="gallery-img img6">
<div>Sixth image</div>
</div>
<div class="gallery-img img7">
<div>Seventh image</div>
</div>
</div>
</div>
CSS Part:
.img-window {
width: 90vw;
height: 92vh;
background-color: rgba(0,0,0,.8);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.img-window img {
max-height: 80vh;
max-width: 80vw;
z-index: 1000;
}
.hidden {
display: none;
}
.show {
display: block;
}
Javascript Part
let galleryImages = document.querySelectorAll('.gallery-img');
let video = document.querySelector('video');
let getLatestOpenedImg;
if(galleryImages) {
galleryImages.forEach(function(image, index) {
image.onclick = function(e) {
e.preventDefault();
getLatestOpenedImg = index + 1;
let container = document.body;
let newVidWindow = document.createElement("div");
container.appendChild(newVidWindow);
newVidWindow.setAttribute("class", "img-window");
newVidWindow.setAttribute("onclick", "closeImg()");
newVidWindow.appendChild(video);
video.classList.remove('hidden');
video.classList.add('show');
video.play();
}
});
}
function closeImg() {
document.querySelector(".img-window").remove();
}
Here's your code unchanged, it seems to be working fine.
Could it be a browser issue that's preventing embedded videos from playing?
let galleryImages = document.querySelectorAll('.gallery-img');
let video = document.querySelector('video');
let getLatestOpenedImg;
if(galleryImages) {
galleryImages.forEach(function(image, index) {
image.onclick = function(e) {
e.preventDefault();
getLatestOpenedImg = index + 1;
let container = document.body;
let newVidWindow = document.createElement("div");
container.appendChild(newVidWindow);
newVidWindow.setAttribute("class", "img-window");
newVidWindow.setAttribute("onclick", "closeImg()");
newVidWindow.appendChild(video);
video.classList.remove('hidden');
// not needed
//video.classList.add('show');
video.play();
}
});
}
function closeImg() {
document.querySelector(".img-window").remove();
}
.img-window {
width: 90vw;
height: 92vh;
background-color: rgba(0,0,0,.8);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.img-window img {
max-height: 80vh;
max-width: 80vw;
z-index: 1000;
}
.hidden {
display: none;
}
/* not needed
.show {
display: block;
}
*/
<div class="container-gallery" id="portfolio">
<h1>Portfolio gallery</h1>
<div class="wrapper-gallery" id="index-gallery">
<div class="gallery-img img1">
<div>First image</div>
<video class="hidden" width="1000" controls>
<source
src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4"
type="video/mp4">
</video>
</div>
<div class="gallery-img img2">
<div>Second image</div>
</div>
<div class="gallery-img img3">
<div>Third image</div>
</div>
<div class="gallery-img img4">
<div>Fourth image</div>
</div>
<div class="gallery-img img5">
<div>Fifth image</div>
</div>
<div class="gallery-img img6">
<div>Sixth image</div>
</div>
<div class="gallery-img img7">
<div>Seventh image</div>
</div>
</div>
</div>
Related
I want to create a carousel like this one here:
https://codepen.io/newrya/pen/eYMZdKe
The catch is, I want to make an auto play carousel using "slick" and want the above slider as individual elements instead of images. This is my initial Code. So, instead of these img elements inside div having class horizontal. I want the above slider as the elements.
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img{
width: 350px;
height: 350px;
margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<img src="images/imags/1.jpg" class="before_after">
<img src="images/imags/2.jpg" class="before_after">
<img src="images/imags/3.jpg" class="before_after">
<img src="images/imags/4.jpg" class="before_after">
<img src="images/imags/5.jpg" class="before_after">
<img src="images/imags/6.jpg" class="before_after">
<img src="images/imags/8.jpg" class="before_after">
<img src="images/imags/9.jpg" class="before_after">
<img src="images/imags/10.jpg" class="before_after">
<img src="images/imags/11.jpg" class="before_after">
<img src="images/imags/12.jpg" class="before_after">
<img src="images/imags/13.jpg" class="before_after">
<img src="images/imags/14.jpg" class="before_after">
<img src="images/imags/15.jpg" class="before_after">
<img src="images/imags/16.jpg" class="before_after">
</div>
</section>
I copied the codepen code and replaced it with my img elements and made some changes with the css code and pasted it in my styles sheet.
This is the code:
const slider = document.querySelector('#image-slider');
const wrapper = document.querySelector('.img-wrapper');
const handle = document.querySelector('.handle');
slider.addEventListener("mousemove", sliderMouseMove);
slider.addEventListener("touchmove", sliderMouseMove);
function sliderMouseMove(event) {
if (isSliderLocked) return;
const sliderLeftX = slider.offsetLeft;
const sliderWidth = slider.clientWidth;
const sliderHandleWidth = handle.clientWidth;
let mouseX = (event.clientX || event.touches[0].clientX) - sliderLeftX;
if (mouseX < 0) mouseX = 0;
else if (mouseX > sliderWidth) mouseX = sliderWidth;
wrapper.style.width = `${((1 - mouseX/sliderWidth) * 100).toFixed(4)}%`;
handle.style.left = `calc(${((mouseX/sliderWidth) * 100).toFixed(4)}% - ${sliderHandleWidth/2}px)`;
}
let isSliderLocked = false;
slider.addEventListener("mousedown", sliderMouseDown);
slider.addEventListener("touchstart", sliderMouseDown);
slider.addEventListener("mouseup", sliderMouseUp);
slider.addEventListener("touchend", sliderMouseUp);
slider.addEventListener("mouseleave", sliderMouseLeave);
function sliderMouseDown(event) {
if (isSliderLocked) isSliderLocked = false;
sliderMouseMove(event);
}
function sliderMouseUp() {
if (!isSliderLocked) isSliderLocked = true;
}
function sliderMouseLeave() {
if (isSliderLocked) isSliderLocked = true;
}
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img {
width: 350px;
height: 350px;
margin-right: 100px;
}
.horizontal {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
:root {
--image-slider-width: min(80vw, 768px);
--image-slider-handle-width: 50px;
}
.horizontal {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
#image-slider {
position: relative;
width: var(--image-slider-width);
overflow: hidden;
border-radius: 1em;
box-shadow: -4px 5px 10px 1px gray;
cursor: col-resize;
}
#image-slider img {
display: block;
width: var(--image-slider-width);
height: auto;
max-height: 80vh;
object-fit: cover;
pointer-events: none;
user-select: none;
}
#image-slider .img-wrapper {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 1;
}
#image-slider .img-wrapper img {
position: absolute;
top: 0;
right: 0;
height: 100%;
filter: grayscale(100%);
transform: scale(1.2);
}
#image-slider .handle {
border: 0px solid red;
position: absolute;
top: 0;
left: calc(50% - var(--image-slider-handle-width)/2);
width: var(--image-slider-handle-width);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
z-index: 2;
}
#image-slider .handle-circle {
width: var(--image-slider-handle-width);
height: var(--image-slider-handle-width);
color: white;
border: 2px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#image-slider .handle-line {
width: 2px;
flex-grow: 1;
background: white;
}
#media (max-width: 768px) {
:root {
--image-slider-width: 90vw;
}
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
« »
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
« »
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
« »
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
« »
</div>
<div class="handle-line"></div>
</div>
</div>
</section>
For some, reason, in class "handle-circle", the code after '171' is not valid(it turns green).
The second problem I am facing is, the codepen slider doesn't work when I replaced it with the img elements. The 'mousemove' event is of no use when using it in carousels. How do I change that?
I think you might have issues with the slick mouse over binding conflicting with the mouse over your image, as a workaround you could iframe it and it will work like so
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 3,
dots: true,
centerMode: true,
});
});
html,
body {
background-color: #e74c3c;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<h2>Slick Carousel Example
<h2>
<div class="carousel">
<div>
<iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div><img src="https://picsum.photos/300/200?random=4"></div>
<div><img src="https://picsum.photos/300/200?random=5"></div>
<div><img src="https://picsum.photos/300/200?random=6"></div>
</div>
</div>
not a nice solution but will give you what you want
I have videos that play on hover but the overlays I use block this function. I'd like to have an opaque overlay with text pop up over the video and it still plays on hover. So my question is how can I add a text and opaque overlay that doesn't block the play on hover.
reference: https://axisstudiosgroup.com/work/
I am using the following:
js:
jQuery(document).ready(function($){
var oPlayer = $("#" + this.id);
$('.work-grid .work-item').on('mouseenter', '.play-video', function(e) {
e.preventDefault();
oPlayer = $(this);
froogaloop = $f(oPlayer[0].id);
froogaloop.api('play');
}).mouseleave(function() {
froogaloop = $f(oPlayer[0].id);
froogaloop.api('pause');
froogaloop.api("seekTo", 0);
});
});
css:
.work-grid {
display: grid;
grid-row-gap: 25px;
width: 100%;
margin-bottom: 80px;
}
.work-item {
position: relative;
margin-top: 0px;
overflow: visible;
}
.work-wrap {
position: relative;
padding-bottom: 58.25%;
}
.work-item iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.125rem solid transparent;
}
.work-item img {
display: block;
height: auto;
max-width: 100%;
height: 100%;
width: 100%;
}
html
<div class="work-grid">
<div class="work-item">
<div class="work-wrap">
<a href="#">
<div class="work-item-overlay">
</div>
<div>
<iframe id="player1" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player1&title=0&byline=0&portrait=0&autoplay=0&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<h3 class="work-item-title">Title</h3>
</div>
</a>
</div>
</div>
Actually, this was solved by simply moving the overlay div to a different position.
<div class="work-item">
<div class="work-wrap">
<a href="example.com">
<div>
<iframe id="player29" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player29&title=0&byline=0&portrait=0&autoplay=0&muted=1&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<div class="work-item-overlay">
<h3 class="work-item-title">TITLE</h3></div>
</div>
</a>
</div>
</div>
I am trying to create a similar carousel like the one on https://ueno.co/about/ (under the "value" section), that scrolls as the user continue to scroll down the page and then displays more information beneath it by adding the class .show to the hidden divs that will be below.
So far I have been using the flickity API and have created most of the setup necessary.
The only thing that is missing is being able to scroll through the carousel using the mouse wheel once it is in focus (which is setup once the user scrolls to it).
My guess was that I could simulate a left and right arrow key press when it is in focus which will change each slide, but if there is a cleaner way I would gladly use that.
jQuery(document).ready(function( $ ) {
var $carousel = $('.js-carousel');
$carousel.flickity({
prevNextButtons: false,
pageDots: false
});
// Split each word in the cell title into a span.
var $cellTitle = $('.js-cell-title');
// Wrap every letter in the cell title
$cellTitle.each(function() {
var $this = $(this);
var letters = $this.text().split('');
$this = $(this);
$this.empty();
$.each(letters, function(i, el) {
$this.append($('<span class="text-split">')
.append($('<span class="text-split__inner">')
.text(el)));
});
// Dirty way of getting the whitespace
var emptySplits = $this.find('.text-split__inner:contains( )');
emptySplits.addClass('whitespace');
emptySplits.parent().addClass('whitespace');
});
//focus the carousel when it is scrolled to
$(window).scroll(function() {
var carousel = $(".carousel");
var carouselTop = $('.carousel').offset().top;
var carouselHeight = $('.carousel').outerHeight();
var windowHeight = $(window).height();
var scrollTop = $(this).scrollTop();
var isScrollMode = carousel.hasClass('scrollMode');
var isInView = scrollTop > (carouselTop+carouselHeight-windowHeight) &&
(carouselTop > scrollTop) && (scrollTop+windowHeight > carouselTop+carouselHeight);
if(!isInView && isScrollMode){
carousel.removeClass('scrollMode');
carousel.blur();
console.log('EXIT');
} else if (!carousel.hasClass('scrollMode') && isInView){
carousel.addClass('scrollMode');
carousel.focus();
//NEEDS FUNCTION TO SCROLL THE CAROUSEL
console.log('ENTER');
}
});
//end of carousel event
function carouselEnd() {
var cells = $(".carousel-cell");
var numberOfCells = cells.length;
var lastCell = cells[numberOfCells - 1];
if( lastCell.classList.contains('is-selected') ){
//will add .show class to the hidden content
}
}
$carousel.on( 'settle.flickity', function( event, pointer ) {
carouselEnd();
});
});
.carousel{
.row{
margin:0;
}
.carousel-cell {
width: 66%;
margin-right: 3rem;
}
.cell__wrap {
width: 100%;
margin: 0 auto;
}
.cell__inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.cell__title {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
margin: 0;
transform: translateY(-50%) translateX(-20%);
}
.text-split {
overflow: hidden;
display: inline-block;
&.whitespace {
display: initial;
}
#for $i from 1 through 100 {
&:nth-child(#{$i}) .text-split__inner {
transition-delay: 0.02s * $i;
}
}
}
.text-split__inner {
transform: translateY(100%);
display: inline-block;
transition: transform 0.3s ease;
.is-selected & {
transform: translateY(0);
}
&.whitespace {
display: initial;
}
}
.cell__thumb {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
// Base styles
html,
body {
width: 100%;
height: 100%;
font-family: 'Work Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
/* background-color: #00011D;
color: #FFF; */
}
.container {
width: 100%;
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.0/dist/flickity.pkgd.min.js"></script>
</head>
<section class="carousel">
<div class="container a">
<div class="carousel js-carousel">
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
</div>
</div>
</section>
I have created a Fadein/Fadeout slider. Left button and right button are working fine but I want to play slider by clicking on tab buttons.
JSfiddle
HTML
<p id="slide1_controls">
<div class="block-icon icon-s1">
<img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s2">
<img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s3">
<img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s4">
<img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
</div>
</p>
<div class="slider-text-context" id="target">
<div class="slide-01 fade-texts active">tab1</div>
<div class="slide-02 fade-texts">tab2</div>
<div class="slide-03 fade-texts">tab3</div>
<div class="slide-04 fade-texts">tab4</div>
</div>
CSS
.fade-texts {
width: 100%;
height: 259px;
left: 0px;
position: absolute;
}
.slider-btn-area {
position: absolute;
z-index: 8;
margin-left: auto;
margin-right: auto;
left: 25%;
top: 54%;
width: 50%;
}
#target > div {
display:none;
}
#target div:nth-child(1) {
display:block;
}
.tab-area {
position: absolute;
left: 25%;
top: 30%;
}
Javascript
$(".icon-s2").click(function() {
activeElem = $("#target .slide-02");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
$(".icon-s3").click(function() {
activeElem = $("#target .slide-03");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
When I press the tab it does not work to try to appear a DIV.
Your code made no sense. The way it looked was that the images had to be clicked in order to fadeIn/Out the tabs. I believe it should be the other way. I cleaned up the markup, and simplified the classes, ids, styles, etc...
Here's the DEMO
HTML
<div id="slides">
<div id="slide1" class="slide active">
<img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
</div>
<div id="slide2" class="slide">
<img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
</div>
<div id="slide3" class="slide">
<img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
</div>
<div id="slide4" class="slide">
<img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
</div>
</div>
<div class="tab-area" id="controls">
<div id="tab1" class="tab">1</div>
<div id="tab2" class="tab">2</div>
<div id="tab3" class="tab">3</div>
<div id="tab4" class="tab">4</div>
</div>
CSS
.slide {
display:none;
}
.active {
display: block;
}
.tab {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
outline: 1px solid black;
text-align: center;
cursor: pointer;
}
jQuery/JavaScript
$(function () {
$('.tab').on('click', function (event) {
var tabID = event.target.id;
//console.log('tabID: '+tabID);
var order = tabID.split('b').pop();
//console.log('order: '+order);
var pos = parseInt(order, 10);
var slideID = 'slide'+pos;
//console.log('slideID: '+slideID);
var act = document.getElementById(slideID);
//console.log('act: '+act.id);
$('.slide').fadeOut(0).removeClass('active');
$(act).addClass('active').fadeIn(750);
});
});
I have tried several things with no success.
I have a video on top of which i have a div that serves as an overlay, on click the video will play.
everything works normally but when in fullscreen, the overlay wont be display, no matter what the css is.
This only happens in chrome and in safari.
this is what i have.
<div class="video_display" >
<div id="play-pause-overlay" style="display: block;">
<div class="play-overlay"></div>
</div>
<video webkit-playsinline="true" allowfullscreen="true" class="sm_video">
<source src="http://assets/video/bbb_trailer_1080p.mp4?ts=961">
</video>
<div id="video-controls" style="position: absolute; z-index: 2147483647; opacity: 0.9; border-radius: 5px;">
<div id="rewind" class="control_button">
<div class="rewindIcon"></div>
</div>
<div id="play-pause" class="control_button_play">
<div class="playIcon"></div>
</div>
<div id="SeekBar">
<div class="seek-bar-container">
<div id="seek-bar" class="bar"></div>
</div>
</div>
<div id="Duration">
<div class="duration">00:00/00:00</div>
</div>
<div id="Mute" class="control_button">
<div class="muteIcon"></div>
</div>
<div id="volume-container" class="volumeDiv">
<input id="volume-bar" type="range" min="0" max="1" step="0.1" value="1">
</div>
<div id="Full" class="control_button" style="display: inline-block;">
<div class="fullIcon"></div>
</div>
</div>
</div>
file with css:
.play-overlay { position: relative;
z-index: 100000000;
opacity: 0.6;
}
#play-pause-overlay{
cursor: pointer;
width: 100%;
position: absolute;
height: 100%;
background: url('//PlayIconOverlay.png') no-repeat center;
z-index: 100000;
opacity: 0.5;
}
Any element with width/height set to 100% will only be as large as its parent. I'd try to add this to your css:
html, body, .video_display {
width: 100%;
height: 100%;
}