CODEWITHSUNDEEP
htmlvideodreamweaver
user3618065
user3618065

Reputation:

Set HTML5 video size?

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>

Upvotes: 6

Views: 24378

Answers (2)

Timothy
Timothy

Reputation: 1158

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>

Upvotes: 7

Parfait
Parfait

Reputation: 1750

#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/

Upvotes: -2

Related Questions