Initially, I managed to create a border around the body without any issues. However, I encountered a problem when attempting to implement a rotating border animation. In order to achieve this, I had to create a div encompassing all my content. The issue arises when I try to apply a border to this div, as it simply does not appear.
@use postcss-preset-env;
@use postcss-nested;
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: block;
box-sizing: border-box;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.loader {
border: 5px solid white;
border-style: solid;
display: block;
overflow: hidden;
border-width: 5px;
}<div class="loader">
<div class="content">
<button id="myBtn" onclick="toggleMute()">Mute</button>
</div>
<script>
var video = document.getElementById("video");
var btn = document.getElementById("myBtn");
var muted = video.getAttribute("muted");
function toggleMute() {
if (muted) {
video.removeAttribute("muted");
btn.innerHTML = "Mute";
} else {
video.setAttribute("muted");
btn.innerHTML = "Unmute";
}
}
</script>
<div class="outer-box-frame">
<video autoplay muted loop id="video">
<source src="video/videoplayback.mp4">
</video>
</div>
</div>