Archived Support Site

This support site is archived. You can view the old support discussions but you cannot post new discussions.

Responsive design for video playback

Andreas Innfeld GMBH's Avatar

Andreas Innfeld GMBH

10 Dec, 2014 02:43 AM

Hi support team,

please provide a complete example (html, javascript, css, ...) for the implementation of a responsive videoscreen solution with the vzaar player. Please don't forward me to some example site where I have to pick the necessary lines from the source code myself so I can make sure I have not missed anything.

Please also make sure you test your solution on tablets like ipad too, especially concerning the correct behaviour on orientation changes during playback.

I couldn't find anything related to the search term "responsive" in the knowledge base by the way.

Thanks and best,
Rico

  1. Support Staff 1 Posted by Joe on 10 Dec, 2014 11:38 AM

    Joe's Avatar

    Hi Rico,

    Thanks for pointing out the lack of knowledge base article on responsive players. I'll write one up as it's something people do ask about fairly often.

    Have you seen our example responsive player? It's built using nothing but simple HTML and CSS. I appreciate that you don't want to have to pick from the source code, but this is about as simple as it gets. Everything on the page is part of making the player work in that way. It works perfectly on our iPad test devices too.

    If you do see anything in there you're unsure about, please ask. I would be very happy to explain what's going on if there's anything you need clarification on.

    Many thanks,

    Joe

  2. 2 Posted by Andreas Innfeld... on 10 Dec, 2014 05:28 PM

    Andreas Innfeld GMBH's Avatar

    Hey Joe,

    thanks for the example responsive player page. Of course it's ok for me to pick the lines from the source code as long as it's cut down to the essentials as it is on the example page.

    It works like a charm in the example because the viewport meta tag isn't set at all. If you include it like this
    ´´´
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ´´´
    the video scaling doesn't work properly on orientation changes.
    It works if you leave out the "initial-scale=1" part ... just for those who have the same problem.

    Thanks and all the best,
    Rico

  3. Support Staff 3 Posted by Alasdair Manson on 10 Dec, 2014 06:14 PM

    Alasdair Manson's Avatar

    Hey Rico

    No problem and thanks for the viewport suggestion. Much appreciated.

    I'll go ahead and close this ticket for now. Thanks for contacting us and don't hesitate to get back in touch on this - or on any other issue - in the future.

    Be sure to keep an eye on our blog for discussion of future developments: http://vzaar.com/blog/

    Regards

    Alasdair

  4. 4 Posted by Andreas Innfeld... on 10 Dec, 2014 11:01 PM

    Andreas Innfeld GMBH's Avatar

    Hi all,

    I've just noticed that there's still an issue with viewport orientation changes. I'm trying to accomplish that when changing to landscape, my layout expands (i.e. changes from e.g. 2-columns to 3-columns) instead of zooming in.

    Zooming in on orientation change can be achieved using this:
    <meta name="viewport" content="width=device-width">

    If you want your display to expand instead of zooming in on orientation change, you must use this:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    Unfortunately the problem here is that when changing the orientation back to portrait, the video container shrinks back into smaller size, BUT THE VIDEO INSIDE STAYS BIG which results in a screen that is cut off. View this page in your iPad to see the faulty behaviour: http://www.video2hair.com/de/test

    The question is: How can I make this work properly?

    Thanks again for your help.

    Best, Rico

  5. Support Staff 5 Posted by Dan on 11 Dec, 2014 12:39 PM

    Dan's Avatar

    Hi Rico,

    This is a fairly well-known issue and most workarounds do suggest accepting the zoom behaviour by removing the initial-scale attribute. Aside from this, I will look to see if I can find any other workarounds for this problem.

    All the best,
    Dan

  6. 6 Posted by Andreas Innfeld... on 11 Dec, 2014 09:24 PM

    Andreas Innfeld GMBH's Avatar

    Hi Dan,

    I've just noticed that vimeo videos seem to get along well with the initial scale attribute. I don't know what technologies those guys use but maybe you can get some inspiration by checking out the test page http://www.video2hair.com/de/test.

    I'd love to just remove the initial-scale part but this would make the site responsiveness senseless, and the zooming also causes ridiculously huge text.

    I really need a fix for this rather soon because quite a lot of our customers watch our videos on ipads. I'd really appreciate at least a temporary solution no matter how hacky it is.

    Thanks again for your efforts!

    Best,
    Rico

  7. Support Staff 7 Posted by Alasdair Manson on 12 Dec, 2014 01:12 AM

    Alasdair Manson's Avatar

    Hello Rico

    Thanks for the additional information. We'll take a closer look at this and get back to you.

    Regards

    Alasdair

  8. Support Staff 8 Posted by Dan on 12 Dec, 2014 03:15 PM

    Dan's Avatar

    Hi Rico,

    I've had the player devs take a look at this following your feedback and am happy to say we may well have a solution. Pending thorough testing, we should have some news for you early next week.

    All the best,
    Dan

  9. Support Staff 9 Posted by Dan on 15 Dec, 2014 10:03 AM

    Dan's Avatar

    Hi Rico,

    We've just released a fix for the player so it should now behave the same way as the vimeo video in your layout. I've just given it a test and everything looks good here, but please check too and get back to us if you find any problems.

    All the best,
    Dan

  10. Support Staff 10 Posted by Dan on 17 Dec, 2014 10:25 AM

    Dan's Avatar

    Hi Rico,

    Just following up to see if you've had a chance to check this yet?

    All the best,
    Dan

  11. Support Staff 11 Posted by Joe on 24 Dec, 2014 11:00 AM

    Joe's Avatar

    Hi Rico,

    It's been a while with no response so I'm going to assume no news is good news and mark this as resolved for now.

    If you do have any further issues or questions please don't hesitate to get back to us. We're always happy to help.

    Many thanks,

    Joe

  12. Joe closed this discussion on 24 Dec, 2014 11:00 AM.

  13. Andreas Innfeld GMBH re-opened this discussion on 26 Dec, 2014 01:41 AM

  14. 12 Posted by Andreas Innfeld... on 26 Dec, 2014 01:41 AM

    Andreas Innfeld GMBH's Avatar

    Hi Dan, hi Joe,

    sorry that I couldn't reply earlier because I wasn't forwarded your message. I just want to give you positive feedback about the new player. We're happy to confirm it's working fine as expected!

    Many thanks for your fast solution and happy holidays!

    All the best for you,
    Rico

  15. Andreas Innfeld GMBH closed this discussion on 26 Dec, 2014 01:41 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac