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.
Results 1 to 5 of 5
  1. #1
    Senior Coder durangod's Avatar
    Join Date
    Nov 2010
    Location
    southwestern USA
    Posts
    1,948
    Thanks
    339
    Thanked 49 Times in 47 Posts

    Best size for video player on mobile

    Hi, i read some old docs from a few years ago that suggested the best size for the video on mobile is 368x270 which should be compatiible with older devices as well. Can anyone else confirm that this is the better size to go with for mobile.

    Thanks

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,165
    Thanks
    1
    Thanked 543 Times in 529 Posts
    Hi there durangod,

    the best size is the one that fits all devices.

    Here is an example...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <base href="http://coothead.co.uk">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Our revels now are ended</title>
    
    <link rel="icon" sizes="144x144" href="https://www.codingforums.com/images/favicon.png">
    <link rel="stylesheet" href="css/screen0.css" media="screen">
    
    </head>
    <body>
    
     <h1>Our revels now are ended</h1>
    
      <div>
    
       <video id="player" autoplay controls>
        <source src="videos/our-revels-now-are-ended.mp4" type="video/mp4">
       </video>
    
       <img src="https://www.codingforums.com/images/wriggle.gif" alt="coothead logo">
    
      </div>
    
    </body>
    </html>
    This is CSS for the page...

    Code:
    
    html,body {
        display: table;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to bottom,#111,#333);
     }
    
    body {
        display: table-cell;
        padding: 0 0.25em;
        vertical-align: middle;
     }
    
    h1 {
        margin: 0 0 1.4em;
        font-size: 1.2em;
        color: #a9a9a9;
        text-align: center;
     }
    
    div {
        position: relative;
        max-width: 40em;
        margin: auto;
        border: 0.06em solid #a9a9a9;   
     }
    
    video {
        display: block;
        width: 100%;
        height: auto;
     }
    
    img {
        position: absolute;
        top: 1.25em;
        left: 1.25em;
     }

    coothead
    Last edited by coothead; 01-02-2018 at 01:41 PM. Reason: I forgot to include the CSS used
    ~ the original bald headed old fart ~

  3. Users who have thanked coothead for this post:

    durangod (01-02-2018)

  4. #3
    Senior Coder durangod's Avatar
    Join Date
    Nov 2010
    Location
    southwestern USA
    Posts
    1,948
    Thanks
    339
    Thanked 49 Times in 47 Posts
    thanks coot

  5. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,165
    Thanks
    1
    Thanked 543 Times in 529 Posts

    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~

  6. #5
    New to the CF scene
    Join Date
    Jan 2018
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    MX Player.


 

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
  •