How to make videopress player responsive

• 

  justinwyllie · Member · May 19, 2015 at 8:38 pm

  • Copy link
  • Add topic to favorites

  Hi

  I am using this embed code:

  <embed src=’http://s0.videopress.com/player.swf?v=1.03′ type=’application/x-shockwave-flash’ width=’640′ height=’476′ wmode=’direct’ seamlesstabbing=’true’ allowfullscreen=’true’ allowscriptaccess=’always’ ov erstretch=’true’ flashvars=’guid=VZezjOOk&isDynamicSeeking=true’ title=”></embed>

  The video player is not responsive. If the container scales down the video player stays at the same size and breaks out of the smaller container.

  This can be seen here:

  http://screen4.com/project/chuckie/

  Just make the browser smaller to see the effect.

  Can the player be made to scale to the width of its container?

  The blog I need help with is: (visible only to logged in users)

• 

  lizthefair · Member · May 20, 2015 at 2:10 pm

  • Copy link

  When I scale that page, the video player is scaling correctly. Could you send me a screenshot of what’s happening for you?

  Here are instructions for how to do that if you need them

  Making a screenshot

  Your site is self hosted, so I can’t see your media library. If you could post a link to your screenshot that would be great.

• 

  justinwyllie · Member · May 20, 2015 at 4:47 pm

  • Copy link

  Thanks for that

  In fact I’ve fixed that page

  I tried to create a test page on my WordPress.com site to illustrate the problem – but I just managed to create a new problem:

  https://newobs.wordpress.com/test/

  This is with the Afterlight theme. Using the [wpvideo] shortcode. Try playing the video and then re-sizing the page. There is an attempt to make the video window scale. This uses the class jetpack-video-wrapper which is applied to a container on the video element. The container element does indeed re-size but not the video. So if you make the overall browser window smaller by re-sizing the browser the video is clipped. (There is a dynamic width and height being applied via a local style setting to the <object> element which does change when you re-size the browser; so maybe the problem is with Flash).

  My original problem concerned how to make a VideoPress embedded video 100% fluid and responsive. This page may give the answer but I haven’t tested it:

  https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

• 

  lizthefair · Member · May 21, 2015 at 1:18 pm

  • Copy link

  I’m looking into this and will let you know what I find.

  In the meantime, if it is a flash issue, you can add an attribute to the tag so it only plays using html5. You can read more about that here

  VideoPress

• 

  lizthefair · Member · May 21, 2015 at 1:37 pm

  • Copy link

  I added

  html5only=true

  to the code in your test video and that solved the problem in my tests. Please let me know if you continue to have problems.

  Thanks!

• 

  justinwyllie · Member · May 21, 2015 at 1:42 pm

  • Copy link

  Thanks

  That fixes it. Interestingly the width and height on the actual video tag don’t change but it does resize. Useful to know that you can force html5. I suspect that the original problem may be related to flash and/or the type of video it is playing. Thanks