Make youtube video play in a popout window

[Neal Culiner]

Hello,

I want to put YouTube videos in my confluence 5.5 install. I use the widget connector and it works and plays embedded, however, the left side nav bar takes up valuable space. I'd rather a user click the video and it opens in a popout window like viewing images in a lightbox type system. This will allow the video to be larger and center screen.

How can I do this?

Thank you.

[rsperafico · Accepted solution]

Hi Neal,

Thank you for your question.

There are several ways (freeware or commercial) to accomplish that and this is something you have to choose from. Please find below a few suggestion to lightbox plugins that you could use:

• Lightview
• fancybox
• OrangeBox and others

1. Please, download the lightbox, upload it to the server and place the files under:

cd /<confluence-install>/confluence
mkdir chosenlightbox
cd chosenlightbox
mv ~/chosenlightbox.zip .
unzip chosenlightbox.zip

2. Open up <confluence-install>/conf/server.xml and edit the following:

<Context path="" docBase="../confluence" debug="0" reloadable="false" useHttpOnly="true" allowLinking="true">

Please notice that the above requires support for Linking in Tomcat. The server.xml file has to be changed adding the allowLinked parameter.

3. Now, these can be referenced as <confluence-install>/confluence id the server root, so in Custom HTML (header part) add:

<!-- ChosenLightbox -->
<link rel="stylesheet" href="/chosenlightbox/css/chosenlightbox.css" type="text/css" media="screen" charset="utf-8" />
<script src="/chosenlightbox/js/jquery.chosenlightbox.js" type="text/javascript" charset="utf-8"></script>

Please notice the above can very depending on your chosen plugin.

4. Some lightbox require to be initiated:

<script type="text/javascript" charset="utf-8">
  // jQuery reference $ in Confluence is AJS.$
  AJS.$(document).ready(function(){
    AjS.$("a[rel^='chosenlightbox']").chosenlightbox();
  });
</script>

Please notice the above can very depending on your chosen plugin.

I hope the above help to your question.

Kind regards,
Rafael

[Neal Culiner]

I am not able to get this to work. I'm using fancybox and Confluence 5.5.4 on Windows Server 2012 R2 (x64). I configured the server.xml, recycled the service, added the fancybox folder and all files are in the correct place. Once I put the code below into the custom HTML end of head box team calendars stops working, I can't get into other spaces, such as one with scroll versions, etc. Does this work in Windows? Tomcat 7?

Reference: http://fancyapps.com/fancybox/

<!-- Add mousewheel plugin (this is optional) -->

<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script type="text/javascript">

AJS.$(document).ready(function() {

AJS.$(".fancybox").fancybox();

});

</script>

[Jeremiah Brayden]

hi, you must try to use LightMV video maker, where you can produce a perfect video in just a second.