Set HTML5 video size?

W

2

6

Alright so I'm trying to re-do our site using code instead of Muse... not done styling yet, still just adding the core elements. How do I recreate the video strip on this page:

http://wearethefirehouse.com (current site)

Except with it set to 100% width, in HTML? The closest thing I got was it filling up the WHOLE page bg, which I don't want.

This was done with 2 Muse plugins: one to actually 'host' the video files (responsively) on an otherwise blank 'storage' page, and a second plugin (iframe plugin) to reference that video on the index.html page.

heres the new page with the current gimpy video playing. I'd like it to fill out like it does in the first site. http://wearethefirehouse.com/firehousetest/

Here's my code for the new site:

HTML:

        <video autoplay loop poster="..assets/video.png" id="bgvid" width=100%>
        <source src="../assets/video.webm" type="video/webm">
        <source src="../assets/video.mp4" type="video/mp4">
        </video>

Waggon answered 3/9, 2014 at 3:40 Comment(0)

A

-2

#vidstrip {
    position:relative;
    padding-top: 0;
    margin-top: 250px;
    overflow: hidden;
}
.vidstrip-text {
    line-height: 2.1em;
    padding: 1em 4em;
    color: white;
}
.vidstrip-section {
    position:absolute;
    top:0;
    left:0;
    padding: 0;
    z-index:-1;
}
.vidstrip-section, #bgvid {
    width:100%;
    height:auto;
}

I tried to emulate Paypal

Hope this helps

http://jsfiddle.net/nr2tds1f/

Apologist answered 3/9, 2014 at 4:9 Comment(9)

That seems to have done the trick... Thanks! I guess once I put your code it at first it didn't look right, because the video was super thin and grew vertically as I shrunk my window, but I tweaked the height rule a bit and it's better now. still wish I could make it maintain proportions as the viewport shrinks. Updated the link with the new CSS. – Waggon 3/9, 2014 at 7:13

EDIT: Spoke too soon. Looked fine viewing from MAMP localhost, but as soon as I uploaded to server it's HUGE, almost like it's ignoring the height rule... – Waggon 3/9, 2014 at 7:19

i.minus.com/j1GXTa9BxqUZb.png it works for me. May be your css file cached as the old version? – Apologist 3/9, 2014 at 7:38

Actually that is the 'bad' iteration.... I completely deleted this directory off the server and re-uploaded it just make sure. Should be like this: (as seen from localhost) minus.com/i/2dX5PVZn6fMa I was planning on using more recent/HD video anyways... maybe this time I should actually crop it so the original file is the dimensions i want at full-browser? – Waggon 3/9, 2014 at 20:18

I guess I just wanted to see the video lock proportions and shrink in-aspect with the browser... like the PayPal home page. – Waggon 3/9, 2014 at 20:29

@weslangdon I tried to emulate Paypal at jsfiddle, check it out – Apologist 4/9, 2014 at 2:12

please let me know if there is any problem – Apologist 4/9, 2014 at 2:15

Beautiful, lemme give it a shot. – Waggon 5/9, 2014 at 5:39

IT WORKS! Just need to style it, but man you are a lifesaver! Sincerely, Learning As I Go. lol – Waggon 7/9, 2014 at 20:53

S

7

You can specify the size of html5 video's like this.

 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Seemaseeming answered 4/9, 2014 at 3:12 Comment(0)

A

-2

#vidstrip {
    position:relative;
    padding-top: 0;
    margin-top: 250px;
    overflow: hidden;
}
.vidstrip-text {
    line-height: 2.1em;
    padding: 1em 4em;
    color: white;
}
.vidstrip-section {
    position:absolute;
    top:0;
    left:0;
    padding: 0;
    z-index:-1;
}
.vidstrip-section, #bgvid {
    width:100%;
    height:auto;
}