video lightbox « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Angular

video lightbox

30 posts from 5 voices

Started 1 year ago by erant
Latest reply from Dude
This topic is closed
This topic is resolved

Tags:

erant
Member

Hi I purchased the theme for my cinematography portfolio, the demo site simply looks great.
I am dealing with a major problem regarding portfolio functionality:

I've been following documentation instruction but having no success in activating lightbox for video clips for some reason. My intention is to create poster images (thumbnails) that, when clicked on, open linked video clips in lightbox.

So, for each post that i wish to include in the portfolio page i have selected "Add external video by URL" and added a poster image from an existing thumbnail in the library. The video clip does not however play in lightbox. Am I doing something wrong here?

thanks
Eran

Posted 1 year ago #
erant
Member

here is a link to the relevant site:

http://www.erantahor.com/testsites/wp_reflex/

Posted 1 year ago #
endorphinfilm
Member

I have the same Problem. I just want the Videos to open in a lightbox - no Portfolio page...
Also it would be nice if there was a way to hide or turn of the play icons over the thumbnails of the Video in the library.

thanks
Sebastian

Posted 1 year ago #
endorphinfilm
Member

here is a link to my relevant site:
http://wp10662152.wp007.webpack.hosteurope.de/_swwp/

Posted 1 year ago #
Dude
Dude
Hey,
you can use the embed shortcode: http://codex.wordpress.org/Embeds to add videos to the content. Plugins like: http://wordpress.org/extend/plugins/projekktor-html5-video-extensions-and-shortcodes/ also support self hosted videos. The gallery (and the thumbnails) itself don't support videos. You can hardcode the image link into the content - it would look like:
```
<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" /></a>
```
Posted 1 year ago #
erant
Member

Thank you will give it a try

Posted 1 year ago #
Dude
Dude

I hope it worked - I set the status to resolved for now.

Posted 1 year ago #
erant
Member

Following this thread I have created several posts which display video portfolio entries in different ways:

http://www.erantahor.com/testsites/wp_reflex/

Is it possible to define the size of the video player for both in page player (where video clip plays selected portfolio entry above the others), as well as the lightbox?

Can this be done separately for each entry - or must it only be global setting?

These questions were asked elsewhere in the forum but remain unanswered so I repeat them here.

As I become familiar with the theme I must say that it looks and works great. Fantastic work.

Posted 1 year ago #
jessipoo
Member

Where do you paste that link you posted if you want video embed in the portfolio item?

I tried the "add external video by URL" but it requires too much clicking and you can't play the video directly from the portfolio page.

How did you your video to play directly from the portfolio page? (the one titled "add video") from your website?

Posted 1 year ago #
erant
Member

I did the following:

Portfolio items / Add new
Entered post name
Selected category
clicked "Add external video by URL" button
copied the video's address from Vimeo's site (from the address bar in Safari)
Pasted the video link next to the "Add external video..." button
Selected "default options" tab and "open lightbox when clicked" - this probably does nothing because videos do not open in lightbox
"publish"

Posted 1 year ago #
jessipoo
Member

I tried this, as I have tried before and it's still not working the way yours is.

Instead of a photo or the video itself I get the link in the portfolio thumbnail, if I click it a new box opens up and it streams the video.

When I change the preview image, it stops working this way (IE, it just opens up the photo, and doesn't give me any options to play a video and doesn't play a video automatically).

Posted 1 year ago #
Dude
Dude

You've 2 options:

1) Lightbox video: Add an image ("Add image to slideshow") - Then select the "Default Options" tab and use "Link Manually" and insert the video link in the url field.

2) Embed video: Click on "External Video by URL" and insert the video url. The default options don't affect videos (because of technical reasons we don't know if the user clicks on the video or not).

Eg on this sample page: http://www.kriesi.at/themes/angular/2011/02/17/aenean-vulputate-eleifend-tellus-aenean-leo-ligula/ the first two slides show option 1, the last one option 2.

Posted 1 year ago #
jessipoo
Member

I want option 2 to appear on my PORTFOLIO front page, like Erant did on his website (sample video). Is there a way to do this AND give the option to increase the video size?

Or I would also be content if the user to click on a photo on the portfolio page and then a separate pop up appears (so far the only way to achieve this is by "add external..." and NOT change the image. So it's a link instead of an thumbnail image)

How do I go about doing both of these? Do I need to install a new plugin?

(option 1 you suggested, requires clicking the portfolio thumbnail item, then clicking the photo again for a pop up to appear, I'm not sure if it's supposed to do something else).

Posted 1 year ago #
endorphinfilm
Member

OK I added the videos into the Portfolio via Vimeo.
Everthing looks fine. When I now hit play on one it works fine too. But when I hit play on a second the player starts to play both videos and it gets very messy.
Please let me know what I can do.

Here is the link:
http://www.sebastianwehkamp.com

Posted 1 year ago #
endorphinfilm
Member

Im working on a Mac/Lion, in Safari it all works fine. The Problem only turns up in Firefox Version 10.0.2.
I would also be interested in increasing the Video size on the Portfolio Page.

Posted 1 year ago #
Dude
Dude

Hey,
You can change the slideshow/image dimensions in functions.php (I'd only adjust the height value). Afterwards regenerate the thumbnails with: http://wordpress.org/extend/plugins/regenerate-thumbnails/ - the image dimensions will also affect the video sizes. The user needs to stop the first video manually and start the second video. There's no way for us to check if another video plays or not.

Posted 1 year ago #
erant
Member

thanks Dude

I did as you advised. changed the following in functions.php (in the Editor):

$avia_config['imgSize']['post-format-image'] = array('width'=>220, 'height'=>123, 'crop'=>false);
$avia_config['imgSize']['fullsize'] = array('width'=>220, 'height'=>123, 'crop'=>true);
$avia_config['imgSize']['featured'] = array('width'=>220, 'height'=>123);
$avia_config['imgSize']['portfolio'] = array('width'=>220, 'height'=>123);

however, no observable changes in clip dimensions on either lightbox or the top clip display. they are all the same size as before the changes.

http://www.erantahor.com/testsites/wp_reflex/

am i doing something wrong here?

thanks in advance

Posted 1 year ago #
erant
Member

please reply

Posted 1 year ago #
erant
Member

?

Posted 1 year ago #
endorphinfilm
Member

Thanks for your replay!
The playback problem only happen when I open the Website in Firefox. The problem is the audio...
After I have watched the first video, the audio starts again when I hit play on a different video - so now I have two audios playing.
It gets a big mess of differend audios playing and auto restarting at the same time.
I just tested it on a friends MAC but he has the same Problem.

Here is the Link again:
http://www.sebastianwehkamp.com

I m really happy with this great theme, but this issue needs to be solved.

Posted 1 year ago #
Devin
Moderator

Hi Erant,

You need to use a plugin like http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate your thumbnails with the new settings.

Endorphinfilm,

I see what your having an issue with. We'll address that asap.

Posted 1 year ago #
erant
Member

Hi Devin

I used regenerate thumbnails on the examples in my test website above but nothing changed.

All display types (lightbox & embedded player on top of the gallery) are the same as before the changes. most importantly the lightbox display: I followed Dude's instructions above and changed the parameters in functions.php. However, the size of the lightbox remains the same, and it plays the at clip much larger than its actual size which makes it look horribly pixelated.

Posted 1 year ago #
Devin
Moderator

Hey erant,

The images will grow to fit their container. If you want to use images that are much smaller than the portfolio column widths, you need to modify the container widths or try using the 4 column portfolio layout.

Posted 1 year ago #
erant
Member

Understood. How / where can the lightbox container size be modified?

Posted 1 year ago #
Devin
Moderator
Hi Erant,

After thinking about this a bit more, you can probably get away with increasing the .inner-entry class border until it constrains the portfolio containers to the smaller size you are looking for (specially if you don't wanna try the rows of 4 entries),

Add to your Quick CSS or custom.css and increase the 10 to 20,30 etc until it fits to your liking.
```
.inner-entry{
border-width: 10px;
}
```
Posted 1 year ago #
erant
Member

Hi Devin
Thank you for all the replies. I'll try to be clearer: I am trying to DECREASE the size of the lightbox - that is when a video clip is selected and pops up and plays inside a frame in the foreground with the background dimmed.
For reference see portfolio item titled "manual embed" here: http://www.erantahor.com/testsites/wp_reflex/
The size of the lightbox is HUGE, it is much bigger than the dimensions of the video which is playing therefore making it very pixelated. I am not concerned with the default size of the thumbnails in the portfolio page. I want to control and decrease the size of the lightbox.

Posted 1 year ago #
erant
Member

Please help, anyone?

Posted 1 year ago #

Dude
Dude

Try to replace following code in js/avia.js:

elements.prettyPhoto({ social_tools:'',slideshow: 5000, deeplinking: false, overlay_gallery:false, default_width: ww, default_height: wh });

with:

elements.prettyPhoto({ social_tools:'',slideshow: 5000, deeplinking: false, overlay_gallery:false });

Posted 1 year ago #

erant
Member

thank you. i will give this a try. most appreciated

Posted 1 year ago #
Dude
Dude

Hi!

Thread closed.

Regards,
Peter

Posted 1 year ago #