Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140734

Adding a video to the animating frame

$
0
0

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.


Viewing all articles
Browse latest Browse all 140734

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>