How vPIP embeds

1 view
Skip to first unread message

Jay dedman

unread,
Dec 31, 2007, 8:15:18 PM12/31/07
to show-i...@googlegroups.com
Enric mentioned that the embed code may get crazy when embedded on other sites.
Here's an example of a problem we saw today:
http://insearchofgoodfood.blogspot.com/2007/12/ryan-is-hungry-video.html

Our friend embedded our latest video on his blogger blog, but the
share button goes funky when you click it.
it also doesnt show the new "share" button that Cheryl made for us.
Does the style not show up in the embed code?

just trying to figure out the expectations.

Jay

--
http://jaydedman.com
917 371 6790
Professional: http://ryanishungry.com
Personal: http://momentshowing.net
Photos: http://flickr.com/photos/jaydedman/
Twitter: http://twitter.com/jaydedman
RSS: http://tinyurl.com/yqgdt9

Cheryl Colan

unread,
Dec 31, 2007, 8:35:17 PM12/31/07
to show-i...@googlegroups.com
The styling I did is in your site's custom CSS file. It's not really available to other sites. I don't know what the interaction is with vPIP. Maybe you have to have "styled" turned on for vPIP to put style into your embed code. It seems like those two things should be separated, but I'm guessing they aren't.

If that's the case, then the choice is:
a- have it look good on your site and unstyled everywhere else
b- have it look the way it did before on your site and everywhere else

Whatever the lesser of 2 evils is.

Or maybe there's a 3rd choice - maybe the vPIP output can get modified so that the styling stuff stays in the embed code snippet that you copy/paste, but stays stripped from the presentation on your site. But, I don't know how to do that.

Cheryl

ryanne hodson

unread,
Dec 31, 2007, 9:30:30 PM12/31/07
to show-i...@googlegroups.com
one of the issues i saw on their embed of our file
was that it opened and started playing automatically
and would not close when you hit close on vpip.

would the styling of our vpip have caused this?

http://insearchofgoodfood.blogspot.com/2007/12/ryan-is-hungry-video.html
--
Me ----> http://RyanEdit.com
Twitter------>http://twitter.com/Ryanne
Documenting Green ---->http://RyanIsHungry.com
Educate ----> http://FreeVlog.org
iChat/AIM ----> VideoRodeo

Cheryl Colan

unread,
Jan 1, 2008, 1:25:07 AM1/1/08
to show-i...@googlegroups.com
I don't see how it could. But since I have no idea what did cause it, I can't say.

Cheryl

Jay dedman

unread,
Jan 1, 2008, 11:28:12 AM1/1/08
to show-i...@googlegroups.com
On Dec 31, 2007 6:30 PM, ryanne hodson <ryanne...@gmail.com> wrote:
> one of the issues i saw on their embed of our file
> was that it opened and started playing automatically
> and would not close when you hit close on vpip.
> would the styling of our vpip have caused this?
> http://insearchofgoodfood.blogspot.com/2007/12/ryan-is-hungry-video.html

yeah, Antonio (who embedded our video) is not cool with the video
automatically playing since it takes over his site when you launch.
But i just tested it on another blog and its fine:
http://testingonsaturday.blogspot.com/
Ill have him redo the code.

However, if you click "share" here: http://testingonsaturday.blogspot.com/
The embed box is all fucked up.

Enric

unread,
Jan 3, 2008, 10:06:42 AM1/3/08
to show-i...@googlegroups.com
I'll look at including in the next release custom styles in the embed code when styling is turned off.

  -- Enric

On Dec 31, 2007 5:35 PM, Cheryl Colan < cheryl...@gmail.com> wrote:

Jay dedman

unread,
Jan 3, 2008, 11:23:55 AM1/3/08
to show-i...@googlegroups.com
On Jan 3, 2008 7:06 AM, Enric <enric...@gmail.com> wrote:
> I'll look at including in the next release custom styles in the embed code
> when styling is turned off.

So is our Share code fucked up on other people's sites because we added styling?
here's another example: http://sn15.org/beyond/node/562

Cheryl Colan

unread,
Jan 3, 2008, 12:06:18 PM1/3/08
to show-i...@googlegroups.com
I'm guessing yes. The way we added styling was to turn OFF vPIP styling and write our own so we could control what it looked like. Evidently doing that turns off the styling within the copy/paste embed code too. So for now RIH either needs to go back to the way it looked before, or accept that when people use the embed code it's not going to look very good.

Cheryl

ryanne hodson

unread,
Jan 3, 2008, 12:27:37 PM1/3/08
to show-i...@googlegroups.com
when you say embed code was styled
this is separate than the formats being styled right?

so if we revert the embed code to be the same as it was (you changed the color on it right?)
then it will function better on other people's sites, but vpip will still look cool on ours?

just trying to make that distinction
since jay was not on the chat where we discussed that separation.

Cheryl Colan

unread,
Jan 3, 2008, 1:33:29 PM1/3/08
to show-i...@googlegroups.com
Embed code is styled separately from your video format links. If you revert to Styled for your embed code, your video format links should still have their new color.

But the "Share" button styling is part of Embed Code styling. So if you revert to Styled for your embed code, vPIP's inline styles will override the custom styling I made for you. Your Share button will go back to the way it was - a gray share button centered on its own line underneath the video format links. But the Share button will keep the left-side padding I added to make room for the Share icon. So if you revert we will need to comment out the CSS line that adds the padding. Then it will just look the way it did before we changed it.

In vPIP Config, when "Styled?" is checked for embed code, inline CSS is added to vPIP's embed code, and that INCLUDES the copy/paste part of the embed code, so that when someone grabs that they get a styled version, and if someone else grabs it from them, they get a styled version, too. Inline CSS overrides whatever is in an external style sheet. (Sometimes there are exceptions to this, but they're not supported the same way across different web browsers.)

In vPIP Config, when "Styled?" is UNchecked, inline CSS is NOT added to vPIP's embed code. That allows the styles I added to your external style sheet (ryanishungry.css) to control the appearance of your Share button. BUT, it also means that inline styles ALSO are NOT included in the copy/paste part of the embed code. So when someone grabs your embed code, they get an UNstyled version that looks bad.

So the choice is:
Have it look good on your site and bad when embedded
or
Go back to the gray button version, and wait for a version of vPIP that will NOT style the embed code but WILL style the copy/paste part so that it looks good when embedded elsewhere.

Does that make sense? It's hard to make this make sense. WHY did I sign up to teach a web design class again? LOL!

Cheryl

PS to show what I mean,

Here is the copy/paste component of your embed code with Styled turned on:
<div class="EmbedCodeShareBtn" id="divEmbedCodeShare1199383818436" style="border: 1px solid rgb(153, 153, 153); background: rgb(221, 221, 221) none repeat scroll 0%; margin-top: 3px; margin-left: 50%; margin-right: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 40px;">    <a href="#" onclick="vPIP_setVisible('divEmbedCode1199383818436', true); vPIP_setEmbed(this, 'vPIP_embedCode1199383818436'); vPIP_setVisible('divEmbedCodeShare1199383818436', false); return false;">Share</a><br></div><div class="EmbedCodeArea" id="divEmbedCode1199383818436" style="border: 2px solid rgb(153, 153, 153); padding: 0pt; background: rgb(221, 221, 221) none repeat scroll 0%; margin-top: 3px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-size: 12px; visibility: visible; display: block;"><table class="EmbedCodeTable" style="width: 96%; margin-left: 2%;" border="0">    <tbody><tr>       <td width="15%"><div class="EmbedCodeBy" style="margin: 0pt; font-size: 8px; text-align: left;"> by: <a href=" http://vpip.org/" target="_blank">vPIP</a></div></td>        <td>Embed (copy &amp; paste):</td>       <td width="20%"><div class="EmbedCodeCloseBtn" style="margin: 0pt; font-size: 11px;">    <a href="#" onclick="vPIP_setVisible('divEmbedCode1199383818436', false); vPIP_setVisible('divEmbedCodeShare1199383818436', true); return false;">close</a><br></div></td>    </tr>    <tr>        <td colspan="3"><textarea class="EmbedCodeTextarea" rows="5" name="vPIP_embedCode1199383818436" id="vPIP_embedCode1199383818436" style="padding: 0pt; font-size: 9px; margin-bottom: 5px; overflow-x: hidden; overflow-y: scroll; width: 100%; margin-left: 0pt;" onfocus="if( window.vPIP_copyToClipBrd){window.vPIP_copyToClipBrd(this)};" readonly="readonly" cols=""></textarea></td>    </tr></tbody></table></div>

See all the style= stuff? background color, border, margin, padding ...

Here's the same copy/paste component of your embed code with Styled OFF:
<div class="EmbedCodeShareBtn" id="divEmbedCodeShare1199383747967">    <a href="#" onclick="vPIP_setVisible('divEmbedCode1199383747967', true); vPIP_setEmbed(this, 'vPIP_embedCode1199383747967'); vPIP_setVisible('divEmbedCodeShare1199383747967', false); return false;">Share</a><br></div><div style="visibility: visible; display: block;" class="EmbedCodeArea" id="divEmbedCode1199383747967"><table class="EmbedCodeTable" border="0">    <tbody><tr>       <td width="15%"><div class="EmbedCodeBy"> by: <a href=" http://vpip.org/" target="_blank">vPIP</a></div></td>        <td>Embed (copy &amp; paste):</td>       <td width="20%"><div class="EmbedCodeCloseBtn">    <a href="#" onclick="vPIP_setVisible('divEmbedCode1199383747967', false); vPIP_setVisible('divEmbedCodeShare1199383747967', true); return false;">close</a><br></div></td>    </tr>    <tr>        <td colspan="3"><textarea class="EmbedCodeTextarea" rows="5" name="vPIP_embedCode1199383747967" id="vPIP_embedCode1199383747967" onfocus="if( window.vPIP_copyToClipBrd){window.vPIP_copyToClipBrd(this)};" readonly="readonly" cols=""></textarea></td>    </tr></tbody></table></div>

the only style= stuff here is to make sure the embed code is visible when you click the Share button.

ryanne hodson

unread,
Jan 3, 2008, 1:44:55 PM1/3/08
to show-i...@googlegroups.com
yep
that makes total sense

if we uncheck the style box
the share button and embed code go back to the old version
BUT the embed will work on other sites.

sadly, i'd rather that vpip look good on our site for presentation purposes for now
and have it be buggy on other sites.
so i'll keep it the way it is.

Jay dedman

unread,
Jan 3, 2008, 2:55:10 PM1/3/08
to show-i...@googlegroups.com
> So the choice is:
> Have it look good on your site and bad when embedded
> or
> Go back to the gray button version, and wait for a version of vPIP that will
> NOT style the embed code but WILL style the copy/paste part so that it looks
> good when embedded elsewhere.

makes sense.
Id like to hear if Enric has a clear solution.
(i know he's working so has limited time)

another question about the embed code.
I wonder if it wouldnt be better to style it more like this:
http://www.detrimentalinformation.com/
the embed code is a small box since most people dont need to see all
of it. They just want to copy and paste.
Youtube does this as well.
Since it takes up less space, i wonder if it would cause fewer problems.

Sull

unread,
Jan 3, 2008, 3:16:14 PM1/3/08
to show-i...@googlegroups.com
jay,

agreed.  the quick solution is to simplify it.
a little js to help select the code is useful...
something like this:

<input id="embedcode" onclick="document.getElementById('embedcode').select();" value="insert embed code here" class="my_input_style" />

Cheryl Colan

unread,
Jan 3, 2008, 5:04:48 PM1/3/08
to show-i...@googlegroups.com
@Sull - That solution only applies if we can edit the vPIP plugin and change the embed code that it outputs. I don't have the chops to do that.

@Jay - I could style the box to be smaller but I don't have the ability to make vPIP NOT output a table. Unless we can change the code vPIP creates, changing the appearance of it won't make any difference in it coming out unstyled when people copy/paste it into their sites. And it won't eliminate the problems they experience on their sites.

Cheryl

Jay dedman

unread,
Jan 3, 2008, 6:20:49 PM1/3/08
to show-i...@googlegroups.com
On Jan 3, 2008 2:04 PM, Cheryl Colan <cheryl...@gmail.com> wrote:
> @Sull - That solution only applies if we can edit the vPIP plugin and change
> the embed code that it outputs. I don't have the chops to do that.
>
> @Jay - I could style the box to be smaller but I don't have the ability to
> make vPIP NOT output a table. Unless we can change the code vPIP creates,
> changing the appearance of it won't make any difference in it coming out
> unstyled when people copy/paste it into their sites. And it won't eliminate
> the problems they experience on their sites.

understood.
sounds like the overworked Enric needs to adjust the vPIP code to
allow the changes we want.

By the way, if any developer sees what we're doing and wants to help
change vPIP.org, Enric says its open source and he's totally into
accepting code that solves problems.

jay

Reply all
Reply to author
Forward
0 new messages