Slideshow not displaying on top of a video

Hi all,

I’m super new to coding, I understand how to write and read some code but when it comes to the more technical items I’m a bit lost. I’ve created a slideshow with 2 images which works fine on its own but when I add it into a code that has a video background it just disappears. I suspect it’s because it’s hiding in the background somewhere even though I thought I had set the video as the background element.

I have used ( z-index: -1 ) to make the video the background.

I would love to get some feedback on how to fix this and what elements to look out for?

Thanks

Ash

Unfortunately, as a new member it won’t allow me to post the code. ;(

Welcome to the forums, @ashkcpt.

You can embed code in your post, but you need to format it to display properly. You can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

If you have a link to a live page which demonstrates the issue, that’s fine, too.

1 Like

Awesome thanks, will try that. Unfortunately I don’t have a live page with it at the moment.

Here is the code.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Palace Hotel Dragonlink Winners</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#DragonVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -1

}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0;
  }

.mySlides {display: none;}
img {vertical-align: middle;}


/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
        position: absolute;
        top: 50%;
        right: 0px;
        width: 300px;
        transform: translate(-50%, -50%) }
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


</style>
</head>
<body>
<video autoplay muted loop id="DragonVideo">
  <source src="dragonlink.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Palace Hotel Latest Winners</h1>
  <p>26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36</p>
  </div>


<img src="images/Logo.jpg" alt="logo" style="width:25%"/>

<div class="slideshow-container">

<div class="mySlides fade">
  <img src="images/Carlsberg Advert.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="images/McDonalds Advert.png" style="width:100%">
</div>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var video = document.getElementById("myVideo");
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

</script>

</body>
</html>

You are missing a closing bracket for the script.

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}// this one is missing

You are also missing the closing div for slideshow-container.

The prefix animations are redundant these days and only serve to confuse.
This is all that is needed.

/* Fading animation */
.fade {
	animation: fade 1.5s;
}
@keyframes fade {
 	from {opacity: .4}
	to {opacity: 1}
}

You have a redundant css bracket here that will break things.

/* Slideshow container */
.slideshow-container {
	max-width: 1000px;
	position: absolute;
	top: 50%;
	right: 0px;
	width: 300px;
	transform: translate(-50%, -50%)
}
}/* redundant bracket */

The img styles are also broken with brackets in the wrong place.

img {
	display: block;
	margin-left: auto;
	margin-right: auto;}/* remove this bracket*/
	padding: 30px 0;
}

When learning to code your best friend is the w3c css and html validators as they will highlight simple typos like this and allow you to get on with the business of coding properly. :slight_smile:

Make those changes and test again and then post your updated code if still not working. Consider setting up a free codepen account which will allow you to post demos and code much more easily. :wink:

3 Likes

Hi Paul,

Many thanks for your feedback, I will try these suggestions now & let you know how I get on.
I have been checking w3c css but obviously messed up on some items - eeekk but it’s all learning curves.

I will definitely look into the codepen account - thanks for this, it’s really helpful.

All the best

Ash

1 Like

Happiness - That worked perfectly Paul. Thanks so much. You are a star!

Just read over your reply again and I have been taking code from w3c css but didn’t realise there are validators on the website - so thanks for that. I will definitely check into it.

Do you know how I can move the slideshow more to the right?

So here is the new working code.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Palace Hotel Dragonlink Winners</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
 box-sizing: border-box;
}

body {
 margin: 0;
 font-family: Arial;
 font-size: 17px;
}

#DragonVideo {
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%; 
 min-height: 100%;
 width: auto; 
 height: auto; 
 z-index: -1

}

.content {
 position: fixed;
 bottom: 0;
 background: rgba(0, 0, 0, 0.5);
 color: #f1f1f1;
 width: 100%;
 padding: 20px;
}

img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 padding: 30px 0;
 }

.mySlides {display: none;}
img {vertical-align: middle;}


/* Slideshow container */
.slideshow-container {
 max-width: 1000px;
       position: absolute;
       top: 50%;
       right: 0px;
       width: 300px;
       transform: translate(-50%, -50%) }

/* Fading animation */
.fade {
   animation: fade 1.5s;
}
@keyframes fade {
	from {opacity: .4}
   to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
 .text {font-size: 11px}
}


</style>
</head>
<body>
<video autoplay muted loop id="DragonVideo">
 <source src="dragonlink.mp4" type="video/mp4">
 Your browser does not support HTML5 video.
</video>

<div class="content">
 <h1>Palace Hotel Latest Winners</h1>
 <p>26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36</p>
 </div>


<img src="images/Logo white.png" alt="logo" style="width:25%"/>

<div class="slideshow-container">

<div class="mySlides fade">
 <img src="images/Carlsberg Advert.png" style="width:100%">
</div>

<div class="mySlides fade">
 <img src="images/McDonalds Advert.png" style="width:100%">
</div>

<div style="text-align:center">
 <span class="dot"></span> 
 <span class="dot"></span> 
 <span class="dot"></span> 
</div>

<script>
var video = document.getElementById("myVideo");
function myFunction() {
 if (video.paused) {
   video.play();
   btn.innerHTML = "Pause";
 } else {
   video.pause();
   btn.innerHTML = "Play";
 }
}
var slideIndex = 0;
showSlides();

function showSlides() {
 var i;
 var slides = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("dot");
 for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none";  
 }
 slideIndex++;
 if (slideIndex > slides.length) {slideIndex = 1}    
 for (i = 0; i < dots.length; i++) {
   dots[i].className = dots[i].className.replace(" active", "");
 }
 slides[slideIndex-1].style.display = "block";  
 dots[slideIndex-1].className += " active";
 setTimeout(showSlides, 2000); // Change image every 2 seconds
}

</script>

</body>
</html>

For HTML: https://validator.w3.org

For CSS: https://jigsaw.w3.org/css-validator/

Your new best friends! smile

3 Likes

Sweetness, thanks so much :slight_smile:

1 Like

You are placing the slideshow absolutely to the right and then you are translating it to the left in this rule.

If you play around with those negative values you will be able to work out which does horizontal and which is vertical and then adjust to suit :slight_smile:

I can’t say whether this is the right approach as I don’t know what you intend to do next. If indeed you want in flow content to follow the slideshow then you would need to use another method instead of absolute positioning.

2 Likes

Radness, played around a little and got it in a nice position with
transform: translate(-10%, -50%)

You rock!

2 Likes

A post was split to a new topic: Slider not working on ipad