The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML5 Video, Using scaleX(2)
HTMLN00b
post 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" />


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 9 2015, 03:34 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HTMLN00b
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 9 2015, 05:59 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st September 2018 - 06:04 PM