 HTML5 Video, Using scaleX(2) |
  |
| HTMLN00b |
 Feb 9 2015, 01:08 PM
Post
#1
|
|
Group: Members Posts: 2 Joined: 9-February 15 Member No.: 22,172  |
Having issues keeping my video at 325px or somewhere in that range, while stretching the video width to 100% in order to fit my <body> settings that are defined. I have tried multiple ways over the last two days. I do not care how the video looks and I can adjust height slightly in the future. By default the video looks very large/"height"/long however you want to say it. Current live version is available Eventcny . com .. Any help would be appreciated!
CSS <style type="text/css"> body { margin:25px; padding-left:85px; padding-right:85px; } img { display:inline; vertical-align:top; } video { height:375px; vertical-align:top; overflow:hidden; } .video source { -webkit-transform: scaleX(2); -moz-transform: scaleX(2);} </style> HTML <body> <img style="padding-left:100px; padding-top:20px;" src="Untitled-2.png" width="375" height="85" alt="" border="0" class=/> <div style="position: relative;"> <img src="obar.png" alt="" width="100%" height="22" usemap="#Map" border="0" /> <p style="position: absolute; top: -16px; boarder: none; right: 10px; width: auto; padding: 0px; background-color: transparent; font-weight: normal; font-size: 16px;"> <a href="index.html" style="color: #FFFFFF";>HOME</a> <a href="about.html" style="color: #FFFFFF";>ABOUT</a> <a href="portfolio.html" style="color: #FFFFFF";>PORTFOLIO</a> <a href="contact.html" style="color: #FFFFFF";>CONTACT</a> </p> </div> <video class="video" preload="auto" autoplay loop poster="/images/Untitled-4.png" > <source src="video/Untitled-4.mp4" type="video/mp4"> <source src="video/Untitled-4.webm" type="video/webm"> <source src="video/Untitled-4.ogv" type="video/ogg"> <embed src="video/Untitled-4.swf" type="application/x-shockwave-flash" /> Your browser does not support the video tag. </video> <img src="obar.png" width="100%" height="22" alt="" border="0" /> |
  |
 
|
| pandy |
Feb 9 2015, 03:34 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Do you want only the width to stretch and the height to stay satic since you've set it to 375px?
|
|
|
|
| HTMLN00b |
Feb 9 2015, 05:04 PM
Post
#3
|
|
Group: Members Posts: 2 Joined: 9-February 15 Member No.: 22,172 |
QUOTE(pandy @ Feb 9 2015, 03:34 PM)  Do you want only the width to stretch and the height to stay satic since you've set it to 375px? Yeah, if this is possible using CSS and HTML only. Was simple using a .swf file rather than trying to use HTML 5 video and have it supported by multiple browsers. Even though the video wont load using my android phone+chrome browser. I have figured it out using JScript, however I need to set a "top:" to the following div and place the rest of the page inside it or the video overlaps everything. |
|
|
|
| pandy |
Feb 9 2015, 05:59 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't know, I don't do much with video. What happens if you specify the width to 100%? No reaon for the browser to make the video span the whole page if you haven't told it that's what you want.
With images, if you specify either width or height and leave the other parameter out the browser will scale the image, keep the aspect ratio. I'd expect the same to happen with videos, but I don't remember if it really does. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 01:49 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC