are video files possible?

[raeszxtwo]

Hello

Is it possible to have a movie play after the pop-up? What file format does it need to be?

Here is my site: http://raeheartsdesign.com/testing.html
IN the video section of my portfolio site, i would like people to clickon the thumnail image of the video and then have it start playing upon pop-up.

thanks!

[RoadRash]

Hi,

You can put a movie inside a popup, but Highslide itself does not provide a player for the movies so you need to use a third-party system for that.
My suggestion is using a system that also works on iPad/iPhone - e.g. YouTube, Vimeo or Bits-On-The-Run.

Live demo Highslide with YouTube: http://highslide.com/examples/youtube.html
Live demo Highslide with Vimeo: http://www.roadrash.no/hs-support/examp ... vimeo.html
I do not have an example with Bits-on-the-Run, but I can create one if you choose to use it.

Note: When using both gallery and HTML popups in the same page, you need to replace highslide-with-gallery.js with highslide-full.js

[raeszxtwo]

Thanks for your quick reply. I believe that i followed all your directions however, i can't get the video to load on the pop-up.

http://raeheartsdesign.com/testing.html
If you click on the "pumpkin thumbnail" in the video section you can see, it just says 'loading".

Can you help?
thanks!

[RoadRash]

This is the code you are using:

Code: Select all

<a href="http://www.youtube.com/embed/tV0h8-PdlBg?rel=0&amp;wmode=transparent" onclick="return [color=#FF0000]hs.expand[/color](this, {objectType: 'iframe', width: 600, [color=#FF0000]height: 35[/color], allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer', preserveContent: false, objectLoadTime: 'after'})" class="highslide">
         <img src="images/2011/video/halloween.png" alt="" height="150" width="200"> </a>

You missed one important thing: The YouTube demo page uses hs.htmlExpand - you are using hs.expand (marked red in the above code).
And probably a typo; you’ve set the height to 35 (marked red in the above code) - I guess it should be 350.

Try this code:

Code: Select all

<a href="http://www.youtube.com/embed/tV0h8-PdlBg?rel=0&amp;wmode=transparent" onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 600, height: 350, allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer', preserveContent: false, objectLoadTime: 'after'})" class="highslide">
         <img src="images/2011/video/halloween.png" alt="" height="150" width="200"> </a>

You can add this at the end of the YouTube url if you want the movie to play automatically when you opens the popup: &autoplay=1

[raeszxtwo]

Hello and thank you for all your help.

It still is not working correctly, the loading... is all i see. And it seems my other image pop-ups have been disabled as soon as i added

Code: Select all

<script type="text/javascript">
    // Apply the Highslide settings
    hs.graphicsDir = '../highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.outlineWhileAnimating = true;

</script>

any ideas?

[RoadRash]

You don’t need the code you’ve posted. The code interferes with the code you already have in your highslide.config.js file.

[raeszxtwo]

you are awesome! it works and looks fantastic!

I will be crediting on my site once its live!