Responsive Vimeo Player

Permalink 2 users found helpful
I am building my first responsive site. It is not live yet. I am searching for a responsive video player. I have seen the vimeo add-on with a fixed width and height. I have also tried the vimeo embed code. All options have not reduced in size when viewing on a smart phone.

Any advice on a responsive player for Vimeo videos would be greatly appreciated.

Thanks,
Brad

SteadyIT
 
PineCreativeLabs replied on at Permalink Best Answer Reply
PineCreativeLabs
There is a way to make your video responsive, with ease! You can use a jquery script called 'FitVids.js'.

Not trying to be "spammy" here, but one option would be to buy one of my responsive themes called 'FlexCRETE', or 'Foundation', which has this script already integrated into it. All you have to do is add the video!

Or, if you are developing this yourself, simply go to:http://www.fitvidsjs.com

That's it! Simple, huh?
SteadyIT replied on at Permalink Reply
SteadyIT
Thanks for the quick reply and answer. I am already working with a marketplace theme so I will look into adding fitvids directly into it.

Thanks
WebOnTheWebb replied on at Permalink Reply
WebOnTheWebb
Have you managed to get fitvids working... if so, I'd love to know how you did it! I find it interferes with the Dashboard and stops me being able to edit a page.

I'm using an external link to a video hosted on bitsontherun but I just can't get fitvids to do its stuff.

Any ideas?
SteadyIT replied on at Permalink Reply
SteadyIT
I am not heard of bitsontherun before. FitVids.js lists the following as supported video players:

1.YouTube
2.Vimeo
3.Blip.tv
4.Viddler
5.Kickstarter

On GitHub they also provide some code in their Readme that highlights on how to use your own video vendor. Have you tried that?

I simply used their instructions on GitHub with my Vimeo embed code and it worked fine.

Does that help at all?
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
If your dashboard is being interfered with, it is likely because you are trying to load jquery a second time. Concrete already includes jquery by default, so in your header, you don't want to add jquery. The only script you should load in the header is the fitvids.js script.

Also, make sure you add the bit of script that is mentioned to the footer. In your dashboard, you can edit the footer (under global areas), and you should be able to add that there.

From there, any video you embed should have the effect added to it.

Should I write up a How-to for this? I think that might be useful.
WebOnTheWebb replied on at Permalink Reply
WebOnTheWebb
Hi. I'm not referencing the JQuery library in my head area... I thought that would cause problems. I'm using the fitvids script and referencing that in the extra head content area in page properties and it's still killing off all the page editing controls and dashboard.

The video is embedded on bitsontherun and the player is JWplayer, which may not be supported by fitvids. Only I can't seem to get past the clash with C5 to find out if the player will work.

A How To would be priceless - I've not tried this before and I'm fairly new to C5 anyway... thanks!
joeyblach replied on at Permalink Reply
I had a quick look at fitvids and all the js is doing is targeting known classes for the videos and applying css to those classes. A simple solution (without the overhead of the JS) would be to apply the following css to iframe, object etc:
// apply to html5 videos
.responsive-vid-img() { max-width: 100%; height: auto; width: auto\9; /* ie8 */}
// makes iframe, object or embed containers responsive
.video-wrapper(@video-container-width) {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
   width: @video-container-width;
   max-width: 100%;
   &iframe, &object, &embed {
      position: absolute;
      top: 0;
      left: 0;


Just note that the above code is written in less rather than css and has been taken from my personal less framework. Might try to make a extension that does this...
Steevb replied on at Permalink Reply
Steevb
Javascript can = Overkill?

Try this CSS and media query:

/*CSS*/
@media (max-width: 767px) {
   .video embed,
   .video object,
   .video iframe {
      width: 100%;
      height: auto;
      min-height: 300px;}
}
@media (max-width: 480px) {
   .video embed,
   .video object,
   .video iframe {
      min-height: 250px;}
}




/*HTML block*/
<h2>Vimeo Video</h2>
         <div class="video">
         <iframe src="http://player.vimeo.com/video/2982834" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/2982834">concrete5 Developer Screencast 1: Introduction to Themes</a> from <a href="http://vimeo.com/user997513">concrete5</a> on <a href="http://vimeo.com">Vimeo</a>.</p>   </div>
WebOnTheWebb replied on at Permalink Reply
WebOnTheWebb
Thanks joeyblach and 55webdesign - I've tried both options and I can't get the class to do its thing on ipad. I'm a newbie so I'm probably missing something really basic. Here's the code for the video I'm using which I'm sticking in an html block in C5:

<div class="video">
<script type='text/javascript' src='jwplayer.js'></script>
<script type='text/javascript' src="http://content.bitsontherun.com/players/IYwHshwE-wnxTcp78.js">
  jwplayer('mediaspace').setup({
    'flashplayer': 'player.swf',
    'author': 'Bearings West Ltd',
    'description': 'Jason Smith of Bearings West',
    'file': 'http://content.longtailvideo.com/videos/flvplayer.flv',
    'frontcolor': '00102a',
    'lightcolor': '2d8ec2',
    'skin': 'www.bearingswest.co.uk/htdocs/jwplayer/fs34/',
    'controlbar': 'over',
    'width':'100%'
    'height':'100%'
    'stretching':'exactfit'



I think the js calls in the player first, then the actual video... which seems okay, and it plays. The problem is I've got another element to the right of the video from a C5 layout and the video runs into it on ipad - I thought using max-width would sort it out but it doesn't.

Any help gratefully received!
joeyblach replied on at Permalink Reply
This only works where you use an iframe to embed a video like the following.

<div class="responsive-video">
<iframe src="http://www.youtube.com/v/iEPTlhBmwRg" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
video{
max-width:100%;
height:auto;
width:auto\9;margin:0 auto;
}
.responsive-video{
position:relative;
padding-bottom:56.25%;
padding-top:0;
height:0;
overflow:
hidden;


JW player does not use embedded videos and I am not entirely sure how to do pull off this css trick without an iframe.

Anyway as promised here is a responsive video block (for any iframe embeded object, includes youtube, vimeo, dailymotion etc) I quickly did (essentially a stripped down version of the youtube block with responsive css applied)

https://www.box.com/s/1e7c6a2ab73354529caa...

Just note that this block is not fool proof, expands to fit the width of the container to which it is added (can easily be fixed by adding a max-width value) and comes as is.

Also sorry if posting a block like this is against the TOS.
SteadyIT replied on at Permalink Reply
SteadyIT
I had started this thread to ask some questions and learn more about responsive video player. The responses are nothing but amazing. Thanks for the input everybody.
joeyblach replied on at Permalink Reply
Have noticed that a significant amount of people have downloaded this block so have decided to develop it a bit more and eventually release on the market. If any one is interested check out the Github page herehttps://github.com/laughingwithu/Responsive-videos...
ckwill90 replied on at Permalink Reply
ckwill90
Finally something that worked for me! I've been searching all morning for a way to make my Animoto videos responsive. Tried several things but nothing worked. Finally found this thread. Thank you so much for this. :)
hereNT replied on at Permalink Reply
hereNT
It's a little too late, but the Vimeo block I wrote in the marketplace has a responsive custom template now.
mead replied on at Permalink Reply
mead
https://www.concrete5.org/marketplace/addons/quickie-player/