Embeding YouTube problems

[disspencer]

Hey-
I can't get the embedded YouTube video to work...doesn't even load from previous image.
Any help would be AMAZING!
http://studiolapp.com/videotest.html

[RoadRash]

Hi,

You can’t include both highslide-with-gallery.js and highslide-full.js in the same page, and you need to use highslide-full.js when using both gallery and HTML expanders in the same page (Youtube is a HTML popup). You need to include highslide-full.js before your highslide.config.js file.
Replace this:

Code: Select all

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>

<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->

with this:

Code: Select all

<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->

You are using the same onclick code for your video as you are using for your images, but this will not work since the YouTube video need to be opened in a Highslide iframe popup. This is what you have for the YouTube video now:

Code: Select all

<a href="http://www.youtube.com/embed/jKJ6ry0sUuc?rel=0&wmode=transparent&autoplay=1"
onclick="return hs.expand(this, config12)" class="highslide">
   <img src="images/LOGOS/PLAYLOGO.jpg"  alt=""/>
</a>

Replace it with:

Code: Select all

<a href="http://www.youtube.com/embed/jKJ6ry0sUuc?rel=0&wmode=transparent&autoplay=1"
onclick="return hs.htmlExpand(this, config12video)" class="highslide">
   <img src="images/LOGOS/PLAYLOGO.jpg"  alt=""/>
</a>

As you can see, we are using a new config for the video; config12video, so we need to create this configuration object in the highslide.config.js file. It must contain the same variables as config 12 + some new.

Code: Select all

var config12video = {
   slideshowGroup: 12,
   thumbnailId: 'thumb12',
   transitions: ['expand', 'crossfade'],
   objectType: 'iframe',
   objectLoadTime: 'after',
   preserveContent: false,
   width: 640,
   height: 360
};

BTW - The popup for the video will look strange since you have deleted all CSS for HTML popups from your highslide.css file.

[disspencer]

Thank you! You are so quick and helpful!
One more question:
I am lost as to how to remove the 'move' and 'close' from the top right of the border and have the resize handle gone or in the border on the bottom right. I'm looking to have the border a consistent 15px all around
http://studiolapp.com/videotest.html
Thank you much!

[RoadRash]

Set padding to 0 for .highslide-html-content and add display: none; to .highslide-header and .highslide-footer.

Code: Select all

.highslide-html-content {
   display: none;
   width: 400px;
   padding: 0;
}

Code: Select all

.highslide-header {
   padding-bottom: 5px;
   display: none;
}

Code: Select all

.highslide-footer {
   height: 16px;
   display: none;
}