DEV Community: shammisharma

Use video as background with CSS

shammisharma — Wed, 15 Feb 2023 09:25:55 +0000

Using images as a background is something we always do with simple css property i.e
background:url(path to image)

However, sometimes there is a need to use video as a background. In this post I will share a neat and simple trick to use video as a background.

Step 1: Create Container

First we will make a container in which video and other content will be there. Please note that height of the container will be relative to the height ratio of video. If you like you can limit it's height using (max-height) and hide overflow content with 'overflow:hidden'.

.vid-bg {width:100%; display:block; max-height: 500px; overflow:hidden;position:relative;margin:0; padding:0}

Step 2: Set overlay content

This is the main part where we will be set our overlay content with the 'position:absolute' property. It will allow our content to remain on top of the video. Following is the code for overlay:

.vid-bg .content { width:100%; height:100%;top:0;position:absolute;background:rgba(0,0,0,0.6); padding:0px; color:#fff; text-align:center; font-size:30px; z-index:1; display:flex; align-items: center;
    justify-content: center;}

Step 3: Use video element

Now we will use our video. There are 3 main properties that we will be using which are : 'autoplay', 'loop' & 'muted'.

autoplay: It will allow us to play our video as soon as its is loaded.
loop : It will allow our video to play on loop.
muted : This is crucial property because without this our video will not autoplay since chromium browsers only allow muted videos to autoplay.

Keep in mind the aspect ratio of video, if you want whole video to be shown then you will have to remove the 'max-height' property else your video will be clipped.

Following is the full html & css code :
HTML:

<div class="vid-bg">
<video muted  autoplay loop width="100%" src="https://joy1.videvo.net/videvo_files/video/free/2013-08/large_watermarked/hd0992_preview.mp4">
</video>
<div class="content"><h1> Use Video as background </h1></div>
</div>

CSS:

.vid-bg {width:100%; display:block; max-height: 500px;  overflow:hidden;position:relative;margin:0; padding:0}

.vid-bg .content { width:100%; height:100%;top:0;position:absolute;background:rgba(0,0,0,0.6); padding:0px; color:#fff; text-align:center; font-size:30px; z-index:1; display:flex; align-items: center;
    justify-content: center;}

.vid-bg .content h1 {background: rgba(255, 255, 255, 0.5); padding:20px; color:#111; border-radius: 60px; font-size:30px; margin:0 10px;}

TADA! You have done it. You can play around with following Codepen.

P.S. : BONUS Content in Codepen! Please check it out.

Thanks! Happy DEVing.

How do you deal with Mouse Arm Syndrome ! Re : Tips that worked for me.

shammisharma — Thu, 23 Jun 2022 11:04:29 +0000

Mouse Arm Syndrome is a condition that affects the hand, wrist and shoulder that normally occurs in desk workers that are subject to repetitive strain using the mouse and keyboard.

How do you deal with it and What measures you take to avoid it ?

My 1st portfolio website

shammisharma — Mon, 13 Jun 2022 12:28:35 +0000

Portfolio URL

https://shammisharma.netlify.app

Design Idea
So after 5 years I decided to built my portfolio website and share it. I went with minimalism approach where goal was to keep it simple and gave it a look of typical resume.

Pages
It has 3 pages including profile page and two different portfolio pages.
Profile page includes Brief, Work History, Roles, Skills & resume(pdf file) to download. For portfolio I decided to built 2 different pages to showcase some of my best works in web UI designing / development and graphics designing.

Deployment
For deployment I used my github profile to create page and then deployed it over Netlify.

Goal
My goal here is to take suggestions from you guys on how can I improve my website more to showcase my abilities and make best impression on recruiters.

Thanks for reading. Kindly rate & let me know how can I improve.

As a Developer, what's that one thing you always want to say to Designers 😅 !

shammisharma — Tue, 31 May 2022 06:16:36 +0000

Hey developers, what's that one thing you always want to say to Designers. Advice, Suggestion, Question, complement anything.
As a designer(+developer) I want to know what others developers go through while working on a project with designers.

What I am ???

shammisharma — Thu, 12 May 2022 06:24:07 +0000

Hello everyone,
I'm glad to joint this amazing community.
I am a web designer, graphic designer, front end developer (html,css,js) for past 5 years or so but to be honest I'm feeling like a noob here. (image for context 😅).
I seriously don't know where I stand in this field after this long time. If I consider myself a designer then besides photoshop, illustrator, css I know nothing. As for considering myself a developer I only have a knowledge of html css , bit of js (so that makes me a ultranoob).
When I look at other designers or devs I feel so overwhelmed like whoa they know so much and I'm nowhere near them. Sometimes its so depressing for me. I seriously don't know what should I do.
Have any of guys been through same ! kindly let me know. Any advice / help will be appreciated 🙂
Thanks and looking forward to this journey on dev 👍🏻