1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Video backgrounds on websites....

Discussion in 'Black Hat SEO' started by sexwork101, Feb 18, 2014.

  1. sexwork101

    sexwork101 Registered Member

    Joined:
    Dec 15, 2013
    Messages:
    64
    Likes Received:
    145
    Home Page:
    like paypal's new design. What is it? javascript? flash? how do they do that?
     
  2. CodeNinja

    CodeNinja Newbie

    Joined:
    Sep 25, 2013
    Messages:
    47
    Likes Received:
    26
    It is just the HTML5 video element and CSS.
     
  3. ice41

    ice41 Power Member

    Joined:
    Aug 18, 2012
    Messages:
    783
    Likes Received:
    248
    Occupation:
    Web Designer
    Location:
    Land of Pineapples
    Call the video tag #video_background on html and add this on your css

    Code:
    #video_background {
    position: absolute;
    background:#EE595A;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    }
     
  4. tony_d

    tony_d Elite Member

    Joined:
    Jun 22, 2013
    Messages:
    2,581
    Likes Received:
    3,164
    Location:
    1600 Amphitheatre Parkway, Mountain View CA
    Yeah, it's great if you want to annoy users. Wtf is wrong with a simple and functional website?
     
    • Thanks Thanks x 1
  5. CodeNinja

    CodeNinja Newbie

    Joined:
    Sep 25, 2013
    Messages:
    47
    Likes Received:
    26
    A nice properly done video put in the right place of the page layout can only add to value.
    Through A/B testing you can conclude what works and what not.
     
  6. uyuyuy99

    uyuyuy99 Junior Member

    Joined:
    Jul 10, 2012
    Messages:
    129
    Likes Received:
    107
    Location:
    U.S.
    Show me one example of a video BG that accomplishes something other than distracting the user. They're fun, but useless and annoying, like tony_d said.
     
  7. RushingWind

    RushingWind Elite Member

    Joined:
    Apr 6, 2013
    Messages:
    2,416
    Likes Received:
    3,333
    Agreed. It's just a waste of time honestly. A business oriented site like PayPal should have known better. Now it just looks like Tim's Kindergarten site.
     
  8. moneymaxx

    moneymaxx Newbie

    Joined:
    Feb 22, 2014
    Messages:
    12
    Likes Received:
    1
    Hell you can use javascript to do flash as well.I thinks you try to ask this question??
     
  9. uyuyuy99

    uyuyuy99 Junior Member

    Joined:
    Jul 10, 2012
    Messages:
    129
    Likes Received:
    107
    Location:
    U.S.
    What the hell does this even mean?
     
  10. MemoryGeek

    MemoryGeek Newbie

    Joined:
    Feb 2, 2014
    Messages:
    23
    Likes Received:
    2
    Location:
    Omega Galaxy, X:46 Y:475 Z:25
    Home Page:
    I read about this on InsertHTML 4 months ago by Johnny Simpson
    HTML:
    Code:
    <div id="container">
        <video autoplay loop muted>
            <source src="video.mp4" type="video/mp4">
            <source src="video.webm" type="video/webm">
        </video>
        <div class="content">
            
        </div>
    </div>
    
    CSS:
    Code:
    #container {
        position: relative;
        overflow: hidden;
    }
    #container .content {
        position: absolute;
        top: 0;
        left: 0;
    }
    JS (jQuery):
    Code:
    $(function() {
        
        // IE detect
        function iedetect(v) {
    
            var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');
            return r.test(navigator.userAgent);
                
        }
    
        // For mobile screens, just show an image called 'poster.jpg'. Mobile
        // screens don't support autoplaying videos, or for IE.
        if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {
        
            (adjSize = function() { // Create function called adjSize
                
                $width = $(window).width(); // Width of the screen
                $height = $(window).height(); // Height of the screen
                
                // Resize image accordingly
                $('#container').css({
                    'background-image' : 'url(poster.jpg)', 
                    'background-size' : 'cover', 
                    'width' : $width+'px', 
                    'height' : $height+'px'
                });
                
                // Hide video
                $('video').hide();
                
            })(); // Run instantly
            
            // Run on resize too
            $(window).resize(adjSize);
        }
        else {
    
            // Wait until the video meta data has loaded
            $('#container video').on('loadedmetadata', function() {
                
                var $width, $height, // Width and height of screen
                    $vidwidth = this.videoWidth, // Width of video (actual width)
                    $vidheight = this.videoHeight, // Height of video (actual height)
                    $aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in
                            
                (adjSize = function() { // Create function called adjSize
                                
                    $width = $(window).width(); // Width of the screen
                    $height = $(window).height(); // Height of the screen
                                
                    $boxRatio = $width / $height; // The ratio the screen is in
                                
                    $adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size
                                
                    // Set the container to be the width and height of the screen
                    $('#container').css({'width' : $width+'px', 'height' : $height+'px'}); 
                                
                    if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..
                        // Set the width of the video to the screen size multiplied by $adjRatio
                        $vid = $('#container video').css({'width' : $width*$adjRatio+'px'}); 
                    } else {
                        // Else just set the video to the width of the screen/container
                        $vid = $('#container video').css({'width' : $width+'px'});
                    }
                                     
                })(); // Run function immediately
                            
                // Run function also on window resize.
                $(window).resize(adjSize);
                            
            });
        }
        
    });
    BIT .LY/1caFnox
    my posts doesn't allow me to post URLs