CSS – Video Inside A Computer

Create a pure css video inside a computer πŸ”₯

Guys Before we begin i want to tell you guys that 😊 Please subscribe to my channel – https://youtube.com/codingfire?sub_confrimation=1 please.. But More than that hope you are safe and happy πŸ’–πŸ”₯

Create a pure css video inside a computer πŸ”₯

Guys Before we begin i want to tell you guys that 😊 Please subscribe to my channel - https://youtube.com/codingfire?sub_confrimation=1 please.. But More than that hope you are safe and happy πŸ’–πŸ”₯

Step One

So the first step is to download the necessary image and video, in this project we will need 1 image and 1 video. image is for the frame of the computer and video which will be inside the computer. Guys the tutorial video is also there so if you want to check feel free to do it πŸ˜ŠπŸ™

See this image -

One image used is the frame and the video inside the computer

Here are the links to download the image and the video 😊

Image Link - https://raw.githubusercontent.com/CoderZ90/Video-Inside-Computer-Using-CSS/main/computer.png

Video Link - https://github.com/CoderZ90/Video-Inside-Computer-Using-CSS/blob/main/video.mp4

Step 02

So in this step we will start from html and the step 03 will be the css, the html is very small and basic

Here we are creating a <div> with the class of computer and then we are inserting our image and then our video

<!DOCTYPE html>
<!-- Coding by CodingFire - youtube.com/CodingFire -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS - Video Inside a Computer | CodingFire</title>
</head>
<body>
   <div class="computer">
       <!-- Computer Image -->
       <img class="computerBorder" src="./computer.png" alt="">
       <!-- video -->
       <video src="video.mp4" muted loop autoplay></video>
   </div>
</body>
</html>

Step 03

So the last step is css

here the main part is we are fitting the video and computer frame image in such a way that it look like the video is inside the computer. We are using position absolute and relative to do it. check the css code below btw source code is also providing and video also


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
}

.computer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 450px;
    height: 450px;
    overflow: hidden;
}

.computerBorder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 350px;
    overflow: hidden;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.2));
}

video {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    /* Put this value too  */
    z-index: -1;
}

I hope you like the blog and it helped you πŸ’–πŸ˜Š
as i said the source code and the video is also available so here it is

Source Code Link - https://github.com/CoderZ90/Video-Inside-Computer-Using-CSS

Video Link - this video is made by me and please subscribe to my channel it really motivates me to do more

https://www.youtube.com/watch?v=IWiYWezOqm8

Happy Coding πŸ’–


Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: