Welcome to TalkGraphics.com
Results 1 to 4 of 4
  1. #1
    Join Date
    Jul 2011
    Location
    spain
    Posts
    100

    Default put video on blackground

    put video on blackground

    After years of experience I got a script that works for me

    in HTML CODE INSERTION (Web properties / HTML head)

    * {
    margin: 0; padding: 0;
    }

    #container {
    overflow: hidden;
    height: 400px;
    background: # edeae8;
    position: relative;
    }

    video {
    position: absolute;

    / * Vertical and Horizontal center * /
    left: 50%; top: 50%;
    transform: translate (-50%, -50%);
    }



    <div id = "container">
    <video autoplay muted loop>
    <source src = "http://neoclick.es/animaciones/1.mp4" type = "video / mp4">
    </ video>
    </ div>


    and we create a js (scrpt.js):

    var video = document.querySelector ('video')
    , container = document.querySelector ('# container');

    var setVideoDimensions = function () {
    // Video's intrinsic dimensions
    var w = video.videoWidth
    , h = video.videoHeight;

    // Intrinsic Ratio
    // Will be more than 1 if W> H and less if W <H
    var videoRatio = (w / h) .toFixed (2);

    // Get the container's computed styles
    //
    // Also calculate the minimum dimensions required (this will be
    // the container dimentions)
    var containerStyles = window.getComputedStyle (container)
    , minW = parseInt (containerStyles.getPropertyValue ('width'))
    , minH = parseInt (containerStyles.getPropertyValue ('height'));

    // What's the min: intrinsic dimensions
    //
    // The idea is to get which of the container dimension
    // has a higher value when compared with the equivalents
    // of the video. Imagine a 1200x700 container and
    // 1000x500 video. Then in order to find the right balance
    // and do minimum scaling, we have to find the dimension
    // with higher ratio.
    //
    // Ex: 1200/1000 = 1.2 and 700/500 = 1.4 - So it is best to
    // scale 500 to 700 and then calculate what should be the
    // right width. If we scale 1000 to 1200 then the height
    // will become 600 proportionately.
    var widthRatio = minW / w
    , heightRatio = minH / h;

    // Whichever ratio is more, the scaling
    // have to be done over that dimension
    if (widthRatio> heightRatio) {
    var newWidth = minW;
    var newHeight = Math.ceil (newWidth / videoRatio);
    }
    else {
    var newHeight = minH;
    var newWidth = Math.ceil (newHeight * videoRatio);
    }

    video.style.width = newWidth + 'px';
    video.style.height = newHeight + 'px';
    };

    video.addEventListener ('loadedmetadata', setVideoDimensions, false);
    window.addEventListener ('resize', setVideoDimensions, false);


    http://neoclick.es/animaciones/index1.htm


    font:https://codepen.io/rishabhp/pen/wGLjwK

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,486

    Default Re: put video on blackground

    I moved this helpful and excellent thread to Web Design Chat.

  3. #3
    Join Date
    May 2015
    Posts
    1

    Default Re: put video on blackground

    Hi, where I may to insert a js (scrpt.js)? TX

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,743

    Info Re: put video on blackground

    Quote Originally Posted by keyronmar View Post
    Hi, where I may to insert a js (scrpt.js)? TX
    it depends on its purpose.

    • Utilities > Web Properties > Website > HTML Code (head) - appears in every website page HEAD for conventional sites; once for Supersites.
    • Utilities > Web Properties > Website > HTML Code (body) - appears at the bottom of every website page BODY for conventional sites; once for Supersites.
    • Utilities > Web Properties > Page > HTML code (head) - appears in the owning page HEAD.
    • Utilities > Web Properties > Page > HTML code (body) - appears in the owning page BODY.
    • Any selected Object:
      • Utilities > Web Properties > Placeholder > HTML code (head) - replaces the Object (it vanishes) and the code is in the page HEAD.
      • Utilities > Web Properties > Placeholder > HTML code (body) - replaces the Object (it vanishes) and the code occupies the bounds of the original Object.

    In all cases, the JS code must be between <script></script> tags.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •