Social Cam

[Toledoh]

Love this!

Any chance of getting it to work with http://socialcam.com/?

ie.

<iframe width="520px" height="391px" src="http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed" frameborder="0" allowfullscreen></iframe>

[davatron5000]

Gave it a whirl, but it doesn't appear to work due to the vendor. If you go to the source http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed you'll see that the video doesn't attempt to scale when you resize. Take it up with the vendor, unfortunately we can't hack that into working.

[kwi]

Interesting, this will be fixed soon :) Thanks for reporting!

[kwi]

We do scale on resize now, anyway you can make it work ?

[Toledoh]

Simple inputing the code doesn't work...http://www.murraysbrewingco.com.au/2011/tests.html...

[Toledoh]

Hi Guys - can you have a look at this again? Would really appreciate it!

[kwi]

So we resize, but we are using an iframe and not an embed, it's probably why it's not working ? Davatron, I let you check what u can do here :)
Thanks !
Toledoh => Your link is done

[davatron5000]

Social cam is now supported using the new customSelector option. If you redownload the .zip, your example video is included in the tests.html and works wonderfully. To get it up and running you'll need the following:

$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"});

We'll be slow to add various vendors to core - and may even rip out currently supported stuff (like kickstarter) - but as things progress, we'll re-evaluate what vendors we support in core.

Thanks.

[kwi]

Awesome, thanks !

[Toledoh]

Brilliant! works a treat - thanks!

[Toledoh]

kwi - you should put this on your blog - it's a great solution to a problem that's been facing us for ages... especially when adding embed video via a CMS - and Social Cam is a fantastic app!

[kwi]

Hmm, do you think this is a case that a lots of people are seeing ?
Thanks for loving Socialcam btw :)

2011/9/13 Toledoh <
reply@reply.github.com>

kwi - you should put this on your blog - it's a great solution to a problem
that's been facing us for ages... especially when adding embed video via a
CMS - and Social Cam is a fantastic app!

Reply to this email directly or view it on GitHub:
#3 (comment)

[Toledoh]

Absolutely. Responsive web design is a huge topic on a multitude of design blogs at the moment. I was introduced to this by http://css-tricks.com which has a huge following. I would suggest that many web developers in your customer base would be excited by this.

[davatron5000]

Could someone from the socialcam team here document what steps were taken to make the JW Player fluid to work with FitVids, I bet the questions comes up again. Thanks.

[kwi]

Interesting, Toledoh, can you put here the the snippet of code you used ?

2011/9/15 Dave Rupert <
reply@reply.github.com>

Could someone from the socialcam team here document what steps were taken
to make the JW Player fluid to work with FitVids, I bet the questions comes
up again. Thanks.

Reply to this email directly or view it on GitHub:
#3 (comment)

[Toledoh]

Hi kwi. I think the question is more aimed at what you did iniitally. When we first looked at http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed, the video did not resize when the browser window resized, and you made some modifications and came back with "So we resize..."

All I have done is inserted the code as per the fitvid.js instructions.

[kwi]

Ah yeah sorry I read this too quickly.
So we just added an handler on the window js resize event to resize the
player div accordingly.

2011/9/15 Toledoh <
reply@reply.github.com>

Hi kwi. I think the question is more aimed at what you did iniitally.
When we first looked at
http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed,
the video did not resize when the browser window resized, and you made some
modifications and came back with "So we resize..."

All I have done is inserted the code as per the fitvid.js instructions.

Reply to this email directly or view it on GitHub:
#3 (comment)

[jivesamba]

Sorry to be thick but I'm still not having any luck with getting my example of the JW Player to be fluid. I have my suspicions that my confusion lies somewhere in the src of my iframe. I mocked up an example just like the socialcam example from tests.html that you are referring to in this thread.

Here is my example: http://mbhstest.com/007/fitvids.htm
The src of my iframe tag points to a html file which is different from the socialcam example in this thread. Is this where my issue lies you think?

Thanks!

Denny

[davatron5000]

So you're trying to apply fitvids on an iFrame that's pulling in a webpage: http://mbhstest.com/007/jw.htm, not a video embed like is intended. I'd suggest either applying fitvids to the that jw.htm page.

Or do the following on jw.htm: Delete ALL the inline styling on div#mediaspace_wrapper and add the following styling to the OBJECT tag:

object {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

[jivesamba]

Er... I guess I am Dave :) I'm in the process of rebuilding a hospital website and am not allowed to use YouTube or Vimeo or other video services that call out externally (due to all forms of social web stuff being blocked inside the hospital's network). Hosting the JW Player allows us all of the playlist (both audio and video) and analytics functionality that we need. Your FitVids js is the closest thing I've seen that would allow JW video scaling within Zurb's Foundation framework that I'm using. I will have a go at your proposal above and shout back with my results. Thanks again for your work with FitVids and your patience. I'm a markup ninja, not a developer :)

[jivesamba]

Just following up... I was able to get my JW Player (JW Embedder method) working "fluidly". I wound up using a (CSS only) solution that someone just came up with yesterday in the longtail video forums. There's a lot of FitVids discussion going on over at Longtail which I'm sure you're aware of. At any rate, thanks again for tolerating my efforts. I've pasted the code I wound up using below in case anyone here is in the same situation:

HTML/Setup:

<script src="fileadmin/templates/pkg/jwplayer/jwplayer.js" type="text/javascript"></script>
<div class="intrinsicRatio ratio16to9">
    <video id="jwplayer" controls="controls" preload="none" width="100%" height="100%" poster="/fileadmin/templates/pkg/jwplayer/echo-hereweare.jpg">
        <source src="/fileadmin/templates/pkg/jwplayer/echo-hereweare.mp4" type="video/mp4"/>
        <source src="/fileadmin/templates/pkg/jwplayer/echo-hereweare.ogv" type="video/ogg"/>   
        <source src="/fileadmin/templates/pkg/jwplayer/echo-hereweare.webm" type="video/webm"/>
    </video>
</div>
<p class="caption">Caption</p>
<script type="text/javascript">
    jwplayer('jwplayer').setup({
        'skin': '/fileadmin/templates/pkg/jwplayer/skins/glow/glow.zip',
        'width': '100%',
        'height': '100%',
        'modes': [
            {type: 'flash', src: '/fileadmin/templates/pkg/jwplayer/player.swf'},
            {type: 'html5'},
            {type: 'download'}
        ]
    });
</script>

CSS:

.intrinsicRatio {
    position:relative;
    height:0;
}
.ratio16to9 {
    padding-bottom:56.25%;
}


.intrinsicRatio div,
.intrinsicRatio object,
.intrinsicRatio embed {
    position:absolute !important;
    /* Everything following breaks iPhone and iPad(!) */
    /*
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:teal;    
    */
}