Welcome to the PageLines Forum. First check out the PageLines Docs to see if we have already answered your question. Before you post please read the forum guidelines.
Upcoming “PageLines Developer Essential Training”
Latest news regarding the developer training videos Click here!
Video lightbox on sidebar
  • Hi, I'm wondering if there's a way to add videos on the sidebar and have them pop out in a lightbox type of effect (Station Pro)? So far I've tried several plugins and adding the code into a text widget, but they all just either play the video directly on the sidebar/fullscreen or take you to youtube. Any widget you know of that would do this, or any other way to achieve the same effect?
  • I've found, when I want something really unique but can't find a Wordpress plugin for it, I may have to go find a jQuery script and modify it for Wordpress. Here's one that does what your looking for: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
    You would have to put the html code in a sidebar widget and link to the js file in your footerscripts area.
    Check this link for information on making jQuery scripts compatible with Wordpress: http://kovshenin.com/archives/jquery-in-wordpress-wp_enqueue_script/
    Basically, you have to change the shortcut "$" into "jQuery".
  • Thanks Jimmy for pointing me to the right direction. I just can't believe that no one else wants this effect...
    Anyhow, it looks like I'm going to need a bit more spesific instructions to make it work - i've installed the wp-prettyphoto but so far all I've got on the sidebar is an embedded thumbnail, which is a link to the youtube page. On a page or post it starts to load the video in the box, but it remains black and nothing gets loaded in the end. So, what exactly should I put and where, anybody?
  • Do you have any other plugins or jQuery content installed (these may interfere with wp-prettyphoto)?
  • Not on the test page, Catrina, but the problem basically is that I just don't know how to use the plugin, nor how to modify the original script for wp. I can't find any documentation either, at least none that would say anything to me, and the page where it's supposed to be isn't even working.
    I can edit existing code when pointed to the right direction, but that's about it - which is why I was hoping there would be an easier way to do this and just can't get that there doesn't seem to be any...
  • To clarify, 'linking to the js file in the footerscripts area' is the problem. I just don't know how to do this and that being the case am not sure if I should even try. It's just that I would love to have the effect, the available options, viewing in the sidebar, fullscreen or going to the youtube page just won't work very well on the page where the videos are supposed to be... :-(
  • And the 'test page' mentioned before should be 'test site' :-)
  • Sorry about the earlier suggestion, it probably shouldn't be tried unless you know the basics of javascript.
  • Yes, I'm not all that familiar with javascript at all, and the wordpress environment is for me an added complication, so to speak. I can find my way round html and have edited quite a few of the php files of the theme, I'm usually able to figure it out if I find documentation or other instructions describing what I should do.
    I figured a way to do it, sort of, though. I first put the embed code into a text sidebar widget, then add this:
    <a title="Question 1 - 'Question1'" rel="shadowbox;width=640;height=427" href="#1">View Clip</a>
    
    &lt;div id="1" class="hidden" title="Question 1'"&gt;
    &lt;object width="640" height="427" data="http://www.youtube.com/v/w1fac0TZGaw"; type="application/x-shockwave-flash"&gt;
    &lt;param name="flashvars"
    &lt;param name="bgcolor" value="#000000" /&gt;
    &lt;param name="allowFullScreen" value="true" /&gt;
    &lt;param name="src" value="http://www.youtube.com//v/w1fac0TZGaw"; /&gt;
    &lt;param name="allowfullscreen" value="true" /&gt;&lt;/object&gt;&lt;/div&gt;
    

    It shows the video as normal box that plays on the sidebar, fullscreen or on youtube, and underneath a link that opens the video in the shadowbox. Would be good enough for me, but (suprise surprise), it doesn't work in IE8 (loads a white box instead of the video), even though it works perfectly in all the other beowsers I've tested. I'll be posting to other forums and looking for any info on this, but if anyone happened to have any ideas of what I should change it would be greatly appreaciated... :-)
  • Sorry, instead of 'View clip' above there should be < a title="Question 1 - 'Question1'" rel="shadowbox;width=640;height=427" href="#1">View Clip< /a> (extra spaces are there on purpose, hoping it won't change it this time...)
  • Have you already checked the box next to Google IE Compatability fix in the theme options under Global Options?
  • Yes, that's checked, but apparently a much simpler option works - linking it directly to the video on youtube makes it work also in IE: < a href="http://www.youtube.com/v/w1fac0TZGaw" rel="shadowbox;width=853;height=505">View clip and the rest can be omitted altogether. The white video light/shadowbox apparently isn't an unknown issue with IE based on what comes up in a quick google search.
    Obviously would be great to have the video loading directly in a popup rather than having a text link, but it's better than nothing. :-) I haven't tested Jimmy's suggestion yet, as it seems that plugin may have some issues with the ngg which I have installed, but I will test that at some point when I have a bit more time.
    Meanwhile all suggestions are still welcome...
  • And the above obviously needs to be closed with , don't know why I can't copy anything correctly here... :-)
  • try highslide.com for video popout, background darkens.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

Weekly Karma