Adding padding: 8px 8px;

HTML & CSS
1

I’m trying to do this and I can’t figure it out.

https://jsfiddle.net/dhxpmu26/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
 
}

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;

}

.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: blue;
}

.video-wrapper {
  max-width: 720px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ratio-keeper {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0;
  padding-top: 56.25%;
  width: 100%;
  margin: auto;
  }
  
.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}
2

You don’t say where you want the padding but the outer and tcell look redundant in that code because you are placing the container in respect of the viewport.

If you want the container to be 8px from the edge then you would need to place it there.

.container {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: 8px;
  right: 8px;
  margin: auto;
  background: blue;
}

Obviously you can’t use height or width of 100% anymore because then that makes it wider than you want.

I don’t know why you are placing it absolutely anyway as you could have used the flex version I gave you years ago. You don’t need half that baggage that you brought from the other demos and the JS looks too complicated just to show one video. You don’t need to walk the dom to find it anymore as you just have the one item and could code it that way. And as I said you don’t need the outer or tcell divs anyway with flex. You can just put display:flex on the body and centre that one item easily.

1 Like
3

The padding is being given to the youtube video.

4

In relation to what?

I believe I gave you the answer anyway.

5

That’s how it works here:
https://jsfiddle.net/182tL0f5/

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

How is it able to work on that code but not this one?
https://jsfiddle.net/a38kwvbo/

How would it be possible for it to use padding?
padding: 8px 8px;

It works in the other code.

6

Because you are not placing the container in relation to the viewport.

The position:relative parent is inside the tcell which has the padding. The absolute child is placed in relation to the position:relative parent and not the cell itself or the viewport.

You could achieve the same in your example but you’d need to change these properties to just this.

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width:100%;
}
.tcell {
  display: table-cell;
  vertical-align: middle;
   padding:8px;
}
.container {
  margin: auto;
  background: blue;
  position:relative;
}

That’s why I gave you a simpler alternative/

1 Like
7

How ddo you get the blue background to cover the entire background?

https://jsfiddle.net/g6j59h03/1/

984×174 110 KB

8

Put it on tcell not .container because container now starts 8px away from the edge.

9

But then that changes the color that is behind the play image.

https://jsfiddle.net/n074Lbtf/

I only wanted to change the background behind the video, not the play image.

Would this need to be done via javascript?

10

You should be able to get the background on the container if you do this.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  width: 100%;
  height: 100%;
  background: blue;
  position: relative;
}

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;

}

.video-wrapper {
  max-width: 720px;
  margin: auto;
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;

}

.ratio-keeper {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0;
  padding-top: 56.25%;
  width: 100%;
  margin: auto;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}
11

I was thinking this.
https://jsfiddle.net/9vrp68em/1/

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.container {
  position: relative;
}


.hide {
  display: none;
  opacity: 0;
}

.wrap {
  opacity: 0;
  animation: fade 3s ease  0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}


 (function iife() {
   "use strict";

   function show(el) {
     el.classList.remove("hide");
   }

   function coverClickHandler(evt) {
     const cover = evt.currentTarget;
     const thewrap = cover.parentElement.querySelector(".container");
     show(thewrap);
     document.body.style.backgroundImage = "linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px), linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px), linear-gradient(black 70px, #0000 70px 100px, black 100px), linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px), linear-gradient(orange 75px, #0000 75px 95px, orange 95px), linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px), linear-gradient(black 80px, #0000 80px 90px, black 90px), linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px), linear-gradient(teal, teal)";

     document.body.style.backgroundSize = "165px 165px";
     videoPlayer.play();
   }

   const cover = document.querySelector(".play");
   cover.addEventListener("click", coverClickHandler);
 }());
12

Adding css into js is rarely the answer. I gave you a better answer.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.