[Pro] Youtube in Scriptylightbox

Hello,
Having issues with youtube video in an iframe in a lightwindow via scriptylightbox, continuing to play after the lightwindow is closed. Is there a way to stop the video completely when the lightwindow is closed, so that it doesn’t continue to play in the background?
Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Have a google and see if you can find any reference to being able to
control (start / stop) YouTube videos from JavaScript. If you do, then
we could look at how to get Lightwindow to issue that command when its
close event fires.

Walter

On Oct 9, 2010, at 2:16 AM, Brett wrote:

Hello,
Having issues with youtube video in an iframe in a lightwindow via
scriptylightbox, continuing to play after the lightwindow is closed.
Is there a way to stop the video completely when the lightwindow is
closed, so that it doesn’t continue to play in the background?
Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I found the below code on Youtube’s api reference website - http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls. How should I implement them with scriptylightbox?

player.playVideo():Void
Plays the currently cued/loaded video. The final player state after this function executes will be playing (1).

player.pauseVideo():Void
Pauses the currently playing video. The final player state after this function executes will be paused (2) unless the player is in the ended (0) state when the function is called, in which case the player state will not change.

player.stopVideo():Void
Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not be watching additional video in the player. If your intent is to pause the video, you should just call the pauseVideo function. If you want to change the video that the player is playing, you can call one of the queueing functions without calling stopVideo first.

Important: Unlike the pauseVideo function, which leaves the player in the paused (2) state, the stopVideo function could put the player into any not-playing state, including ended (0), paused (2), video cued (5) or unstarted (-1).

player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
Seeks to a specified time in the video.
The seconds parameter identifies the time from which the video should start playing.
If the player has already buffered the portion of the video to which the user is advancing, then the player will start playing the video at the closest keyframe to the specified time. This behavior is governed by the seek() method of the Flash player’s NetStream object. In practice, this means that the player could advance to a keyframe just before or just after the specified time. (For more information, see Adobe’s documentation for the NetStream class.)
If the player has not yet buffered the portion of the video to which the user is seeking, then the player will start playing the video at the closest keyframe before the specified time.
The allowSeekAhead parameter determines whether the player will make a new request to the server if seconds parameter specifies a time outside of the currently buffered video data. We recommend that you set this parameter to false while the user is dragging the mouse along a video progress bar and then set the parameter to true when the user releases the mouse.

This approach lets the user scroll to different points of the video without requesting new video streams by scrolling past unbuffered points in the video. Then, when the user releases the mouse button, the player will advance to the desired point in the video, only requesting a new video stream if the user is seeking to an unbuffered point in the stream.

The final player state after this function executes will be playing (1) unless the value of the seconds parameter is greater than the video length, in which case the final player state will be ended (0).

player.clearVideo():Void
Clears the video display. This function is useful if you want to clear the video remnant after calling stopVideo(). Note that this function has been deprecated in the ActionScript 3.0 Player API.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, to start with, how are you embedding the youtube videos in your
page so the Lightbox will run on them? Do you make a separate page in
you Freeway document and use the Action to link to the video, or are
you using some other technique?

Walter

On Oct 11, 2010, at 1:37 PM, Brett wrote:

I found the below code on Youtube’s api reference website -YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google for Developers
. How should I implement them with scriptylightbox?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I made another page in freeway, applied the “php insert page” action, and then used scriptylightbox applied to a graphic to link to the page.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow. That sounds like a lot of work. I’ve discovered that if you get
the embed code from the YouTube site, they have an option called ‘Use
iframe embed code’. This works absolutely perfectly with
ScriptyLightbox, and stops the movie when you close the overlay, too
(tested in Safari and Firefox, haven’t tried on Windows, though).

Here’s what to do:

  1. Locate your video on YouTube, and click on the Embed button under
    the clip you want to show.

  2. Check the Use iframe embed code (beta) option, along with any other
    options you want to use. Copy the code they present to you.

  3. Make your thumbnail graphic, and apply an External Hyperlink to it.
    In the URL field, paste in the code you copied from YouTube. This will
    include an entire iframe tag. Chop that down until you only leave the
    content of the src attribute (example follows).

  4. Click the Extended button in the Hyperlink dialog, and add the
    classname ‘lightwindow’ to the link.

That’s it. Works perfectly, zooms to fill the screen, stops when you
close the overlay, etc.

Walter

On Oct 11, 2010, at 2:08 PM, Brett wrote:

I made another page in freeway, applied the “php insert page”
action, and then used scriptylightbox applied to a graphic to link
to the page.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, that’s great. Thank you so much!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just remembered that this step is unnecessary as long as you applied
the ScriptyLightbox Action to the parent element that contains your
thumbnail image or images. So if you drew an HTML box and applied the
SL Action to it, then either added your thumbnails as inline objects
within that box or as child elements of that box, your links would all
magically get extended with the lightwindow classname anyway. No harm
if you do it manually, but not necessary.

Walter

On Oct 11, 2010, at 2:25 PM, Walter Lee Davis wrote:

  1. Click the Extended button in the Hyperlink dialog, and add the
    classname ‘lightwindow’ to the link.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 11 Oct 2010, 6:25 pm, waltd wrote:

(tested in Safari and Firefox, haven’t tried on Windows, though).

Just found out:

IE7√

IE8√

Firefox latest√

Chrome latest √


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi, I’ve used this on a site I’m developing and it works great… But I have found that when incorporated into a slider using Carousel, the initial slide/pane won’t use the ScriptyLightbox effect and just links through as a normal hyperlink. Any ideas?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Which element are you applying the ScriptyLightbox to when you do
this? Is it to the HTML box (the pane) or to the thumbnail image that
you are linking to your movie? If the latter, try applying
ScriptyLightbox to the thumbnail image itself, along with the link to
the movie.

Walter

On Nov 10, 2010, at 7:48 AM, RussK wrote:

Hi, I’ve used this on a site I’m developing and it works great… But
I have found that when incorporated into a slider using Carousel,
the initial slide/pane won’t use the ScriptyLightbox effect and just
links through as a normal hyperlink. Any ideas?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Each pane has two thumbnails, so ScriptyLightbox is applied to each of the thumbnails. It all worked fine initially, but I had set up Carousel incorrectly which resulted in an extra blank pane appearing. Now that I’ve rectified that part, the Lightbox part doesn’t work correctly on the main pane that has the main Carousel action applied to it. Hope this (kinda) makes sense! ref: http://www.alexpetty.biz


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your first image is ending up with an Image Map rather than a regular
link. This is what is throwing things off. Check to be sure that these
images are all normal rectangles, that they don’t overlap anything,
that they don’t have curved corners or curved border effects or
shadows, etc. Any of those effects signal to Freeway that the link
attached should be made as an Image Map rather than a regular href.
Without the href (link) the JavaScript in the effect will not work at
all. There’s no way to make it work with a map, either, because maps
don’t accept classnames.

Walter

On Nov 10, 2010, at 10:52 AM, RussK wrote:

Each pane has two thumbnails, so ScriptyLightbox is applied to each
of the thumbnails. It all worked fine initially, but I had set up
Carousel incorrectly which resulted in an extra blank pane
appearing. Now that I’ve rectified that part, the Lightbox part
doesn’t work correctly on the main pane that has the main Carousel
action applied to it. Hope this (kinda) makes sense! ref: http://www.alexpetty.biz


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Perfect! Works a treat, many thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 11 Oct 2010, 6:25 pm, waltd wrote:

Wow. That sounds like a lot of work. I’ve discovered that if you get
the embed code from the YouTube site, they have an option called ‘Use
iframe embed code’. This works absolutely perfectly with
ScriptyLightbox, and stops the movie when you close the overlay, too
(tested in Safari and Firefox, haven’t tried on Windows, though).

Here’s what to do:

  1. Locate your video on YouTube, and click on the Embed button under
    the clip you want to show.

  2. Check the Use iframe embed code (beta) option, along with any other
    options you want to use. Copy the code they present to you.

  3. Make your thumbnail graphic, and apply an External Hyperlink to it.
    In the URL field, paste in the code you copied from YouTube. This will
    include an entire iframe tag. Chop that down until you only leave the
    content of the src attribute (example follows).

  4. Click the Extended button in the Hyperlink dialog, and add the
    classname ‘lightwindow’ to the link.

That’s it. Works perfectly, zooms to fill the screen, stops when you
close the overlay, etc.

Walter

On Oct 11, 2010, at 2:08 PM, Brett wrote:

I made another page in freeway, applied the “php insert page”
action, and then used scriptylightbox applied to a graphic to link
to the page.

Hi Walt.

I followed the instructions here that you posted. It works great, but the screen size is always maxed out. Some videos are just not clean enough to see at that size. Is there a way to make it smaller or native to its screen size? Many thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not with ScriptyLightbox, no. There is another Action for YouTube,
have a look on ActionsForge.

Walter

On Apr 8, 2011, at 1:59 PM, RA wrote:

I followed the instructions here that you posted. It works great,
but the screen size is always maxed out. Some videos are just not
clean enough to see at that size. Is there a way to make it smaller
or native to its screen size? Many thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 8 Apr 2011, 6:06 pm, waltd wrote:

Not with ScriptyLightbox, no. There is another Action for YouTube,
have a look on ActionsForge.

Walter

On Apr 8, 2011, at 1:59 PM, RA wrote:

I followed the instructions here that you posted. It works great,
but the screen size is always maxed out. Some videos are just not
clean enough to see at that size. Is there a way to make it smaller
or native to its screen size? Many thanks!

Okay will do. Thanks again for helping me with the accordion. :wink:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options