We can add an image to the frame by Adding the image as the background of the content but I can't find a solution to add a video using the same approach without a hand. (I just want a frame for my video.)
I want to add an id to the added video too.
Here is the CodePen.
And here is exact same code:
setTimeout(function(){
MovieClip();
}, 2000)
function MovieClip() {
let video = document.createElement('video');
video.setAttribute("id", "clip"); // Note: add id to video so that we can interact with it later
document.getElementsByClassName('content')[0].appendChild(video);
let clip = document.getElementById("clip");
let source = document.createElement('source');
source.src = `http://clips.vorwaerts-gmbh.de/VfE_html5.mp4`;
/* Adding video as the background of the content not working
let node = document.getElementsByClassName('content')[0];
node.style.background = `url(http://clips.vorwaerts-gmbh.de/VfE_html5.mp4) center/cover`; */
source.type = 'video/mp4';
video.appendChild(source);
}/* html {
overflow: hidden;
background-color: #121518;
}
video {
position: absolute;
overflow: hidden;
left: 0vw;
top: 0vh;
width: 90%;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
border: 0.1vw dashed #eb4034;
} */
body {
height: 100vh;
margin:0;
display: flex;
align-items: center;
justify-content: center;
background-color: #11151a;
}
.box {
border-radius: 1.31vh;
position: relative;
overflow: hidden;
}
.box::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
repeating-linear-gradient(-45deg, white 0 0.48828125vw, hotpink 0 0.9765625vw) 0 0/1.380859375vw 1.380859375vw;
width: calc(100% + 1.380859375vw);
height: calc(100% + 1.380859375vw);
transform: translate(-1.380859375vw, -1.380859375vw);
will-change: transform;
animation: animate 4s linear infinite;
}
.box .content {
width: calc(90vw - 1.953125vw);
height: calc(85vh - 3.9318479685452163vh);
/*border-radius: 1.31vh;*/
box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);
margin:1vh;
}
@keyframes animate {
to {
transform: translate(0, 0);
will-change: transform;
}
}
.stopAnimation:after {
-webkit-transform: none !important;
transform: none !important;
}<!DOCTYPE html><html><head></head><body> <div id='box' class="box"><div class="content"></div></div></body></html>Please run the CodePen, I think there is two main issues with my code:
First: the video doesn't fill the frame
Second: Compare the top corner with the bottom, as you see the lower corner is covered unexpectedly with the video.