Easy way for videos with Phoca Gallery - Instructions inside
Posted: 19 Feb 2010, 18:07
I need to have videos available for my website not from youtube. (Its banned in some countries.)
I started to follow this tutorial posted here.
https://www.phoca.cz/documents/2-phoca-g ... eo-gallery
But I didn't like having to insert and modify that code for each one of the images/videos.
Then I noticed this post.
viewtopic.php?f=11&t=2698
And realized with a little bit of css I could insert the video on top of the displayed image in Phoca all while using the insert video button from the All Videos Plugin.
Here's the steps.
1. Install the All Videos plugin from here.
http://extensions.joomla.org/extensions ... llery/3955
2. Create a gallery / category with your thumbnails of each video.
3. Upload the videos to the All Videos folder (http://www.yoursite.com/images/stories/videos/)
3. Find the thumbnail for the video you want to play.
4. Edit the description, click the AVR Media button and add your video.
5. The important part, then wrap the AVR code in a bit of inline css.
here is an example:
<div align="center" style="z-index: 100;bottom: 400px; width: 100%; position: relative;">{flv}MyVideoTitle{/flv}</div>
The details:
width 100% and align center are for positioning the video in the same center as the image
z-index is needed to pop the video on top of the image
position: relative to set where the video will be moved from.
bottom: 400px moves the video up and on top of the image.
So experiment a bit, but you should only need to change the bottom: 400px to something else to get your video centered.
Have fun.
I started to follow this tutorial posted here.
https://www.phoca.cz/documents/2-phoca-g ... eo-gallery
But I didn't like having to insert and modify that code for each one of the images/videos.
Then I noticed this post.
viewtopic.php?f=11&t=2698
And realized with a little bit of css I could insert the video on top of the displayed image in Phoca all while using the insert video button from the All Videos Plugin.
Here's the steps.
1. Install the All Videos plugin from here.
http://extensions.joomla.org/extensions ... llery/3955
2. Create a gallery / category with your thumbnails of each video.
3. Upload the videos to the All Videos folder (http://www.yoursite.com/images/stories/videos/)
3. Find the thumbnail for the video you want to play.
4. Edit the description, click the AVR Media button and add your video.
5. The important part, then wrap the AVR code in a bit of inline css.
here is an example:
<div align="center" style="z-index: 100;bottom: 400px; width: 100%; position: relative;">{flv}MyVideoTitle{/flv}</div>
The details:
width 100% and align center are for positioning the video in the same center as the image
z-index is needed to pop the video on top of the image
position: relative to set where the video will be moved from.
bottom: 400px moves the video up and on top of the image.
So experiment a bit, but you should only need to change the bottom: 400px to something else to get your video centered.
Have fun.