Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 19 of 19
  1. #16
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    One of the problems with using positioning, it pulls the object out of the normal flow of things and almost always depends the content use of it to make things fit. I personally would have used css grid.
    Anyway I re - positioned elements in the HTML and changed things in the CSS. You can use margin-top again as you like.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myHeader h1 {
        font: bold 3.1rem serf;
        margin-top: 120px;
    }
    #myHeader h2 {
        font:bold 1.13rem Franklin Gothic Medium;
    }
    .button {
      background-color: #008cba;
      border: none;
      color: white;
      text-align: center;
      display: inline-block;
      border-radius: 12px;
      font-size: 16px;
    }
    #the_button{
    display: flex;
    justify-content: center;
    display: height : ;
    width : ;inline-block;
    }
    .button:hover{
        background-color: pink;
        color:black;
    }
    #container{
    	object-fit: cover;
    }
    #top_main{
    position: absolute;
    top:0px;
    left:20px;
    }
    #AllTheRest{
        color:red;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
        <video autoplay loop id="video-background" muted plays-inline>
            <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
        </video>
    <div id="top_main">
    	<div id="myHeader">
    		<h1>GET HIGHER GRADES FASTER!™</h1>
    		<h2>Grab the world's only educational product featuring five international fashion models.</h2>
    	</div>
    
    	<div id="the_button">
    		<form action="http://mediolana.com">
    			<input class="button" type="submit" value="➠Order Now!"></input>
    		</form>
    	</div>
    </div>
    </div>
    <div id="AllTheRest">
        <p>All the news that fits</p>
        <p>All the news that fits</p>
        <p>All the news that fits</p>
        <p>All the news that fits</p>
        <p>All the news that fits</p>
    </div>
    </body> 
    </html>
    Dear Mr Sunfighter,
    This looks great now!

    Thank you so much for taking the time and trouble to explain and illustrate this issue to us. It is enormously appreciated!

    I am so glad to have found this forum. Places like this should be what the Internet is all about, and remind me of that early idealism.

    I look forward to exploring this space more in the near future.

    Check you soon!

    With very best wishes/AM

  2. #17
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hey there guys,
    I hope that this message finds you all in excellent spirits, and that you are having a superb start to the weekend.

    By way of an update, we tested the video background code on desktop computers, and it looks more than great.

    One problem remains, however: it does not display correctly on laptops, tablets or smartphones. Essentially, what happens is that the smaller the display, the more the video gets chopped off. It doesn't adjust to the size of the display.

    We tried substituting our container and video CSS tags with those from the winning solution here:

    https://stackoverflow.com/questions/...een-resolution

    However, this just resulted in our video background being magnified to the point where nothing was discernible.

    We also tried defining the video using '100VH' and '100VW' for height and width respectively. But this just had the effect of making our video tiny on all displays.

    The present version of our code is as follows:

    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myHeader h1 {
    font-family: HelveticaNeue-CondensedBold, sans-serif;
    color: white;
    margin-top: 120px;
    text-align: center;
    }
    #myHeader h2 {
    font:bold 1.13rem Franklin Gothic Book;
    color: white;
    text-align: center;
    }
    .button {
    background: rgba(255, 51, 102, 0.2);
    opacity: 50%;
    border: 1px solid;
    color: white;
    font-family: HelveticaNeue-CondensedBold, sans-serif;
    //padding: 10px 0;
    text-align: center;
    display: inline-block;
    border-radius: 2px;
    font-size: 20px;
    }
    #tom{
    display: flex;
    justify-content: center;
    display: :inline-block;
    }
    .button:hover{
    background: rgba(138, 255, 188, 0.9);
    color:white;
    }
    #container{
    object-fit: cover;
    }

    video{
    position: absolute;
    top:0px;
    z-index: -1;
    }
    </style>
    </head>

    <body>
    <div id="container">
    <first id="myHeader">
    <h1>GET HIGHER GRADES FASTER!™*</h1>
    <h2>*Grab the world's only educational product featuring five international fashion models.</h2>
    </first><br>

    <div id="tom">
    <form action="https://mediolana.myshopify.com/products/higher-grades-faster-%E2%84%A2">
    <input class="button" type="submit" value="➠Order Now!"></input>
    </form>
    </div>
    <video autoplay loop id="video-background" muted plays-inline>
    <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie)_Compressed.mp4"
    type="video/mp4">
    </video>

    Does anyone have any suggestions as to what we can do to get the video background to scale correctly across different sized displays?

    As ever, any guidance would be sincerely appreciated. Thank you for taking the time to read this post!
    Last edited by Alex Maxim; Feb 8th, 2019 at 08:37 PM.

  3. #18
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,452
    Thanks
    3
    Thanked 608 Times in 594 Posts
    Hi there Alex Maxim,

    the video example that I gave you in post #5
    scaled correctly on all devices.

    coothead
    ~ the original bald headed old fart ~

  4. Users who have thanked coothead for this post:

    Alex Maxim (Feb 8th, 2019)

  5. #19
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there Alex Maxim,

    the video example that I gave you in post #5
    scaled correctly on all devices.

    coothead
    Dear Mr Coothead,
    We cannot thank you enough for your kind and brilliantly accurate response! You are absolutely right. We enormously appreciate you enclosing the CSS with the compressed video clip!

    Just in case this is of any use to anyone reading this, our corrected background video CSS with text and a CTA button overlaid is now as follows:

    video{
    position: absolute;
    top:0px;
    z-index: -1;
    display: block;
    width:100%;
    height:auto;
    }

    (All coders please note: the z-index: -1; snippet is crucial, as otherwise any CTA text or buttons will not display.)

    With very best wishes/AM


 
Page 2 of 2 FirstFirst 12

Tags for this Thread

Posting Permissions

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