Tagged: av_button, av_video, button, fullscreen, video
-
AuthorPosts
-
October 19, 2015 at 9:58 pm #521206
I’m trying to create a button using one of the provided shortcodes with a manual link to a self hosted video. When the link in the button points to YouTube or Vimeo everything works fine – the lightbox opens and a video is playing. However when I simply point to a video file (self hosted), the button opens a new page, where the browser takes over and shows the video.
I’d rather have a behavior similar to when I use a “video” media element shortcode. However it causes the video to be shown in the post, instead of a button with a link to a lightboxed version of the video.
On top of that, the video player for self hosted videos is missing a fullscreen button.
Also, I’d like to remove the “hover” action on the feature image when viewing a single post, or to change it’s icon to ue80d and a title to “Watch now” and have the feature image behave the same as the button (open lightbox with self-hosted video).
Any help with this? Thanks.
- This topic was modified 9 years, 2 months ago by maltaannon. Reason: additional information
October 20, 2015 at 8:57 am #521442Hi maltaannon!
Thank you for using Enfold.
Please add the iframe=true parameter if you want to open a self hosted video in a lightbox. Something like this:
http://yoursite.com/wp-content/uploads/2015/10/video.mp4?iframe=true
Remove the hover effect with this:
.single span.image-overlay.overlay-type-image { display: none !important; }
Regards,
IsmaelOctober 20, 2015 at 10:20 am #521460While I waited for an answer I figured it out with the ?iframe=true, however this still does not answer my original question in full. When I do that, the self hosted video opens up in a lightbox, but it is being played back by a browser video player, not the one included with the theme (av_video). And if it would, the player would still be missing the fullscreen button.
As for the feature image maybe I wasn’t precise. By hover actoin I mean not only the overlay, but the entire link. I guess that if the ling would be gone, the hover would not happen as well. So How to I remove the link being added to the feature-image? Please not that I’m using this technique to add feature images: https://kriesi.at/support/topic/inject-feature-image/ On top of that I’ve just added the css you posted to Quick CSS and it did not remove the hover effect.
By the way… is it possible to open that (inject feature image) thread up again? There are still some things, notes, and additional questions that need to be added there and I don’t want to start a new thread.
- This reply was modified 9 years, 2 months ago by maltaannon.
October 20, 2015 at 11:00 pm #522064Hey!
One way to do it would be to create a separate -blank- page and place the video there (using an Enfold video element), then link it to that page instead of the video directly.
Best regards,
JosueOctober 25, 2015 at 6:51 pm #524454For video that is out of the question unfortunately. What of my other questions? The hover effect, the link, and one more: any way to set the size of the lightbox manually for each instance? I mean manual – like adding something to the link to force it to open up in a specific size, which may be different depending on some conditions?
October 25, 2015 at 10:38 pm #524515Hi,
Can you post the link to your website please?
Regards,
JosueOctober 25, 2015 at 10:59 pm #524534I don’t see how the link would help, but I can’t post it anyway. It’s being developed locally.
October 26, 2015 at 5:04 am #524624Hi!
Ismael code to disable the image overlay should work, if it doesn’t, the only way to debug it would be to inspect the website live. Let us know through this topic when you publish it.
Cheers!
JosueOctober 26, 2015 at 2:04 pm #524866Ok. I understand. The problem might be caused by injecting feature images via functions.php. I wrote a post about it here https://kriesi.at/support/topic/inject-feature-image/. Some problems in there still remain and maybe they are causing this behavior.
After a while…..
And I was right. Injecting the feature image as described in the link above apparently changes some styling and Ismaels code doesn’t work, however when the feature image is there to begin with the code works. That also means that the solution that I found to inject images is not a good one (as Yigit claimed it to be) because it does not cause Enfold to “think” the image was already in the DB to begin with.
That’s problem one.Problem two still not answered here is this:
Also, I’d like to remove the “hover” action on the feature image when viewing a single post, or to change it’s icon to ue80d and a title to “Watch now” and have the feature image behave the same as the button (open lightbox with self-hosted video).
As you can hopefully see this time, this is not only about removing the hover effect. In fact I would be sort of ok with it being there if I could set the link of the image manually, to a self hosted video or a youtube/vimeo wideo, remove the white overlay, leaving the icon there but changing it to ue80d or whatever else. Or… simply… do not link to anything – if my understanding is correct, if there was no link in the image, there would be no hover, no overlay, no problem.
- This reply was modified 9 years, 2 months ago by maltaannon. Reason: link to the post was missing
October 26, 2015 at 11:49 pm #525235Hey!
Can you paste the rendered HTML of the featured image element in single view here?
Best regards,
JosueOctober 27, 2015 at 12:04 am #525242I believe this is the part you asked for?
<article class='post-entry post-entry-type-standard post-entry-1323 post-loop-1 post-parity-odd post-entry-last single-big with-slider post-1323 post type-post status-publish format-standard hentry category-after-effects tag-animation tag-particles tag-text tag-articles' itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost"> <div class="big-preview single-big"> <a href="" title="The Matrix Raining Code"><img src='http://maltaannon.com/wp-content/uploads/tutorials/after-effects/the-matrix-raining-code/preview.jpg' title='The Matrix Raining Code'> </a> </div>
October 27, 2015 at 12:28 am #525247Yea, try with this CSS code:
.big-preview a{ pointer-events: none !important; }
October 27, 2015 at 12:35 am #525250Yes! This works. Thank you. Now is there a way to maybe set the link manually? As you see the “a” tag is added automatically. My “inject” filter only adds the “img” tag, but it is wrapped in the “a” to begin with.
Also… how would I turn of the thumbnail image entirely (in the blog-grid)? I’ve found a post about it but it didn’t help me.
https://kriesi.at/support/topic/articles-blog-shortcode/October 27, 2015 at 2:16 am #525267Hi!
The link is added by this line in includes/loop-index.php:
if($slider) $slider = '<a href="'.$link.'" title="'.$featured_img_desc.'">'.$slider.'</a>';
Try turning it to:
if($slider) $slider = $slider;
Cheers!
Josue -
AuthorPosts
- You must be logged in to reply to this topic.