4

I've been playing around with the code and I can't seem to get this to work. I've googled, searched on this site looking through 13 pages and I still can't find the answer to what I'm looking for.

I want to have a video start out with a specific dimension and then scale down as I resize the browser (going from desktop to iPad/iPhone).

I've tried doing the below, but the video stays the same. Nothing scales.

<div id="myVideo" style="width:640px; height:360px">
    <video id="player1" width="100%" height="100%" style="width:100%; height:100%;">
        <!-- Pseudo HTML5 -->
        <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
    </video>
</div>

What should I be doing differently?

Tony Bianco
  • 93
  • 4
  • 10
  • This might be useful - http://fitvidsjs.com/. Also, you might want to consider media queries - http://www.w3.org/TR/css3-mediaqueries/ – Sagar Patil Feb 08 '12 at 02:41
  • Tried that. I'm down to media queries at this point, but my media query for smartphones is not working. This example is not working when I resize the browser: '@media only screen and (min-width : 320px )and (max-width : 480px)' – Tony Bianco Feb 08 '12 at 03:16

3 Answers3

11

set your video node's height/width attributes to the original video size, but keep the style width/height at 100% like this

<video id="player1" width="640px" height="360px" style="width:100%; height:100%;">

then resize your myVideo div as necessary and mejs should respond as expected

starpause
  • 733
  • 7
  • 12
  • Weird answer, but it worked for me. It was already working in Chrome just by setting the video attribute width / height (in pixels), but for some reason not in Firefox. Adding CSS width/height 100% made it so that I can dynamically resize the video. Thanks! – Phil Aug 16 '13 at 21:31
  • It's enough and better though just to add to * – Ilia Ross Sep 11 '14 at 09:03
  • This has worked for me. Its a hack. http://stackoverflow.com/questions/22872915/mediaelement-js-responsive-video-with-fixed-max-size/34511368#34511368 – Vish Dec 29 '15 at 12:46
0

This works. The width = "50%" in the myvids div is there for IE. Without it the video does not properly fill the player. Order of the video attributes really seems to matter.

<div class="myvids" id="viddivap1" width="50%" style="width:100%; position:relative;">
    <video class="thevid" width="640" height="360" style="max-width:100%; height:100%;" id="my_video_ap1" preload="auto" autoplay controls="controls" >
        <source type="video/youtube" src="http://www.youtube.com/watch?v=FAGL9gxhdHM" />
    </video>
</div>
Zoe
  • 2,129
  • 3
  • 21
  • 33
Doug Kersten
  • 31
  • 3
0

Well, you have a specific size (640px 360px) set on the #myVideo div, so the video element inside is 100% of that box. If you remove the pixel dimensions - or try changing them to max- -- it should be scalable.

Tim
  • 1
  • This doesn't work with MediaElement.js (what the OP is using). It can only handle fixed dimensions. – acme Mar 15 '12 at 10:30
  • Its hack, but have worked for me http://stackoverflow.com/questions/22872915/mediaelement-js-responsive-video-with-fixed-max-size/34511368#34511368 – Vish Dec 29 '15 at 12:47