It is currently Sun Nov 23, 2014 2:47 am Advanced search

Embeding YouTube problems

Help for using the Highslide Editor, the visual way of setting up Highslide.

Embeding YouTube problems

Postby disspencer » Sat Oct 08, 2011 11:14 pm

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
disspencer
 
Posts: 3
Joined: Fri Sep 09, 2011 9:18 pm

Re: Embeding YouTube problems

Postby RoadRash » Sun Oct 09, 2011 9:10 am

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/[hilight]highslide-full.js[/hilight]"></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 [hilight]hs.htmlExpand[/hilight](this, [hilight]config12video[/hilight])" 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'][hilight],
   objectType: 'iframe',
   objectLoadTime: 'after',
   preserveContent: false,
   width: 640,
   height: 360[/hilight]
};

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

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8228
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Embeding YouTube problems

Postby disspencer » Mon Oct 10, 2011 10:09 pm

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!
disspencer
 
Posts: 3
Joined: Fri Sep 09, 2011 9:18 pm

Re: Embeding YouTube problems

Postby RoadRash » Wed Oct 12, 2011 3:03 am

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;
   [hilight]padding: 0;[/hilight]
}

Code: Select all
.highslide-header {
   padding-bottom: 5px;
   [hilight]display: none;[/hilight]
}

Code: Select all
.highslide-footer {
   height: 16px;
   [hilight]display: none;[/hilight]
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8228
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway


Return to Highslide Editor

Who is online

Users browsing this forum: No registered users and 1 guest