011 027 5098 | 079 157 2902
  • About Us
  • Blog
  • Support
  • Contact
BP Web DesignBP Web DesignBP Web DesignBP Web Design
  • Home
  • Websites
  • E-commerce
  • Custom Design
  • Hosting
    • Web Hosting
    • Virtual Private Servers
    • Dedicated Servers
    • Reseller Hosting
  • Corporate Branding

How to create a fullscreen video background

    Home Uncategorized How to create a fullscreen video background
    NextPrevious

    How to create a fullscreen video background

    By kaimbi | Uncategorized | 0 comment | 1 November, 2013 | 3

    Discover how to add short video backgrounds using YouTube

    Create a fullscreen video background

    inspiration: barrelny.com/recap/2012

    Barrel is a digital agency from New York, and like many agencies it enjoys showing off its design and development skills. The 2012 Recap element of the site, chosen here, uses a full screen video background.
    The selected video clip shows an everyday scene at the agency to help emphasis who and what they are. The short clip runs on a loop simply repeating at the end of the clip. The length of the clip is around 30 seconds, but it is the size that is a more important consideration. The bigger a clip the longer it will take to load, so keeping it short/small will help to ensure a more enjoyable user experience.
    There are various options for creating a video background. There is the more bespoke option of using Video.js or BigVideo.js for one thing. Alternatively, for those who do not have the video they want, a video from YouTube can be implemented.

    Big div

    The first step is to create a div to contain the video. This will have a height of 100% and a width of 100%. Add a new div tag, < div id=”bigvid”>< /div>, to the body and name it accordingly. Add a comment to the closing tag for future reference.

    001 < div id=”bigvid”>
    
    text will go in here
    
    002 < /div> 

    Go fullscreen

    Save the page and preview in your preferred browser. The video will currently have a space around it – set the body tag to 0 padding and margins. Even though the video is set to 100% on both height and width, only the width is currently observing the width value. Add position:absolute to the video container CSS to resolve.

    001 #bigvid {
    002 position: absolute;
    003 background-color: #000;
    004 height: 100%;
    005 width: 100%;
    006 }

    Add an overlay

    To overlay a div tag over the video the div needs to be positioned using the absolute value. Add a new div tag and name appropriately. Now set the width and height to 400px and set position to absolute. Add a background colour, but make sure that it is one that complements the background video.

    001 #start
    002 {
    003 position: absolute;
    004 width: 400px;
    005 height: 400px;
    006 z-index: 1;
    007 background-color: #000;
    008 }

    Styling and centring

    To make the div created in the previous step a circle, the border-radius property is to be used. Add border-radius and set to the width of the div tag to 400px. To position the circle, first add top: 30%. To centre the circle add left: 50%, and margin-left to half the width with a minus value, -200px. Finally add some padding and text.

    001 #start
    002 {
    003 position: absolute;
    004 width: 400px;
    005 height: 400px;
    006 z-index: 1;
    007 background-color: #000;
    008 border-radius: 400px;
    009 top: 30%;
    010 left: 50%;
    011 margin-left: -200px;
    012 }

    No tags.

    Leave a Comment

    Cancel reply

    Your email address will not be published. Required fields are marked *

    NextPrevious
    Copyright 2019 BP Web Design | All Rights Reserved. A BP Web Group Company
    • Home
    • Websites
    • E-commerce
    • Custom Design
    • Hosting
      • Web Hosting
      • Virtual Private Servers
      • Dedicated Servers
      • Reseller Hosting
    • Corporate Branding
    BP Web Design