How to get onclick event functionality without javascript?

Question

I want that when I click this [watch trailer] button, I will see the trailer coming on the screen but without using on click (without javascript) using only CSS.

Also, When the video is seen there is a cross button. It should close the video on clicking but with CSS only. I tried to do this using the checkbox CSS hack but it doesn't work.

body {
  background: #000;
}

.play {
  position: absolute;
  bottom: 50px;
  left: 100px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 1.2em;
  cursor: pointer;
}

.play img {
  margin-right: 10px;
  max-width: 50px;
}

.trailer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(20px);
  visibility: hidden;
  opacity: 0;
}

.trailer video {
  max-width: 900px;
  outline: none;
}

.close {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  filter: invert(1);
  max-width: 32px;
}

<a class="play"><img src="Images/play.png">Watch Trailer</a>
<div class="trailer">
  <video src="Images/Mulan-Official-Trailer.mp4" controls="true" autoplay="true"></video>
  <img src="Images/close.png" class="close">
</div>

Please show the checkbox code you tried and see stackoverflow.com/help/minimal-reproducible-example thanks. — A Haworth
– A Haworth, Commented May 29, 2022 at 6:16
Please edit your question (button bottom left of your question) and get the images/video working in the snippet. As A Haworth indicated too include the checkbox hack etc. you've tried — Zach Jensz
– Zach Jensz, Commented May 29, 2022 at 7:24

Mubeen Ahmad · Accepted Answer · 2022-05-29 08:09:30Z

3

Here is the onclick event functionality without javascript by using the checkbox hack, Look at the code:

#btn{
    display: none;
}

label:hover {
  cursor: pointer;
}

label::after {
  content: 'Close Trailer';
  display: none;
}

label > iframe {
  display: none;
}

#btn:checked + label > iframe {
    display: block !important;
}

#btn:checked + label > .play {
    display: none;
}

#btn:checked + label::after {
  margin-top: 5px;
  display: block;
}

<input type="checkbox" id="btn">
<label for="btn">
  <a class="play"><img src="Images/play.png">Watch Trailer</a>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/YQ1vN_91KO0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</label>

edited May 29, 2022 at 8:09

answered May 29, 2022 at 7:53

Mubeen Ahmad

4482 gold badges4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ndotie Over a year ago

are you sure this stops the playing video or just there eating browsers resources, only its not shown on browser?? #btn:checked + label > .play { display: none; }

Mubeen Ahmad Over a year ago

@ndotie The answer is not as easy as a simple yes or no. But in my point of view video will be loaded but it is not visible to the user. To prevent loading video, instead of changing CSS, you can remove the video from HTML using JS.

Harshit Juneja Over a year ago

@MubeenAhmad Thank you so much. You have solved a huge & tricky problem for me. Thanks a lot!!

Mubeen Ahmad Over a year ago

@HarshitJuneja It's nice helping you, please consider marking the answer as the correct one to help others having the same trouble.

Alireza · Accepted Answer · 2022-05-29 08:21:25Z

Make sure IDs are unique for each item, otherwise this won't work

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

 :root {
  --close-size: 12px;
  --close-thickness: 2px;
  --close-color: #eeeeee;
  --close-hoverColor: #00adb5;
  --close-background: rgba(0, 0, 0, 0.25);
  --close-hoverBackground: rgba(255, 255, 255, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.play {
  appearance: none;
  outline: none;
  user-select: none;
}

.play::after {
  display: block;
  content: attr(data-title);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #00adb5;
  color: #00adb5;
  cursor: pointer;
  transition: all 0.5s ease;
}

.trailer {
  position: fixed;
  display: none;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  overflow: hidden;
  transition: all 0.5s ease;
}

.container {
  position: relative;
  width: 80vw;
  border-radius: 5px;
  animation: fadeIn 0.3s ease-in-out;
  transform-origin: center;
}

.play:checked+.trailer {
  display: flex;
}


/* Close Icon */

.close {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  background: var(--close-background);
  border-radius: 0 5px;
  padding: 15px;
  z-index: 10;
  transition: all 0.5s ease;
}

.close:hover {
  background: var(--close-hoverBackground);
}

.close:before,
.close:after {
  position: absolute;
  content: "";
  height: var(--close-size);
  width: var(--close-thickness);
  background: var(--close-color);
  left: 45%;
  top: 30%;
  border-radius: 25px;
  transition: all 0.5s ease;
}

.close:hover:before,
.close:hover:after {
  background: var(--close-hoverColor);
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}


/* Close Icon */

video {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  width: 100%;
  border-radius: 5px;
}

<div class="item">
  <input id="trailer" class="play" type="checkbox" data-title="Watch Trailer!" />
  <div class="trailer">
    <div class="container">
      <video src="./trailer.mp4" poster="https://picsum.photos/350/200?random=1" controls="true"></video>
      <label for="trailer" class="close"></label>
    </div>
  </div>
</div>
<div class="item">
  <input id="trailer2" class="play" type="checkbox" data-title="Watch Trailer!" />
  <div class="trailer">
    <div class="container">
      <video src="./trailer.mp4" poster="https://picsum.photos/350/200?random=2" controls="true"></video>
      <label for="trailer2" class="close"></label>
    </div>
  </div>
</div>
<div class="item">
  <input id="trailer3" class="play" type="checkbox" data-title="Watch Trailer!" />
  <div class="trailer">
    <div class="container">
      <video src="./trailer.mp4" poster="https://picsum.photos/350/200?random=3" controls="true"></video>
      <label for="trailer3" class="close"></label>
    </div>
  </div>
</div>

Thank you. You have solved my problem perfectly by just using CSS only. Wonderful brain!! A huge thanks to you also.

Collectives™ on Stack Overflow

How to get onclick event functionality without javascript?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related