Make youtube video play in a popout window
Asked by 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.


Answers:
author: rsperafico
body: 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](http://projects.nickstakenburg.com/lightview "Lightview")
* [fancybox](http://fancybox.net/ "fancybox")
* [OrangeBox](http://orangebox.davidpaulhamilton.net/ "OrangeBox") and others

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

```
cd /&lt;confluence-install&gt;/confluencemkdir chosenlightboxcd chosenlightboxmv ~/chosenlightbox.zip .unzip chosenlightbox.zip
```

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

```
&lt;Context path="" docBase="../confluence" debug="0" reloadable="false" useHttpOnly="true" allowLinking="true"&gt;
```

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:

```
&lt;!-- ChosenLightbox --&gt;&lt;link rel="stylesheet" href="/chosenlightbox/css/chosenlightbox.css" type="text/css" media="screen" charset="utf-8" /&gt;&lt;script src="/chosenlightbox/js/jquery.chosenlightbox.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
```

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

4. Some *lightbox* require to be initiated:

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

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

I hope the above help to your question.

Kind regards,  
Rafael

comments: author: Neal Culiner
body: 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\>


author: Jeremiah Brayden
body: hi, you must try to use [LightMV](https://lightmv.com/ "Video Maker") video maker, where you can produce a perfect video in just a second.


Tags: multimedia

video