Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #22269


    I am having issues playing videos in Firefox (I have inserted the recommended additions to my “.htaccess” file (see the bottom of my topic entry here). Additionally, when I view the videos in a browser that does play them, it’s requiring two clicks — once the video loads, I click the play arrow, and then have to click it again to start the video.

    Someone told me: “You need to ask how to setup jQuery to launch PrettyPhoto on single click. What I think is that jquery is asking for one click and then prettyphoto for one more.”

    If that is correct, can someone from this forum enlighten me? Thanks!

    And here’s the code I pasted into my htaccess file:


    # Proper MIME type for all files


    # JavaScript

    # Normalize to standard type (it’s sniffed in IE anyways)


    AddType application/javascript js jsonp

    AddType application/json json

    # Audio

    AddType audio/mp4 m4a f4a f4b

    AddType audio/ogg oga ogg

    # Video

    AddType video/mp4 mp4 m4v f4v f4p

    AddType video/ogg ogv

    AddType video/webm webm

    AddType video/x-flv flv

    # SVG

    # Required for svg webfonts on iPad


    AddType image/svg+xml svg svgz

    AddEncoding gzip svgz

    # Webfonts

    AddType application/ eot

    AddType application/x-font-ttf ttf ttc

    AddType application/x-font-woff woff

    AddType font/opentype otf

    # Assorted types

    AddType application/octet-stream safariextz

    AddType application/x-chrome-extension crx

    AddType application/x-opera-extension oex

    AddType application/x-shockwave-flash swf

    AddType application/x-web-app-manifest+json webapp

    AddType application/x-xpinstall xpi

    AddType application/xml rss atom xml rdf

    AddType image/webp webp

    AddType image/x-icon ico

    AddType text/cache-manifest appcache manifest

    AddType text/vtt vtt

    AddType text/x-component htc

    AddType text/x-vcard vcf


    Hi nicklynn,

    Can you provide a link to a page showing a video that is having the issue? If its a prettyPhoto lightbox I’m not sure what it would take to make it autoplay on ‘popop’ but maybe we can see whats going on live and go from there.




    Hi Devin,

    Thanks! Sure, the page is here: — I’m kicking around in there, setting things up. As a side note, I would like to hide the small “film strip” icon that shows upon hovering over each thumbnail. Can you suggest a solution there?

    Thanks again,



    Hi Devin,

    If I can add a request :) I’m trying to add some space around each of the thumbnail areas on the home page. There seem to be several divs that I might target — do you know the most elegant way to address the spacing? I was playing with margins on the “.inner_entry” div, but that added space by squishing all the thumbnails horizontally.



    PS I realize I’m addressing things that are not within the confines of this thread. Apologies — you guys do a great job of keeping things orderly here.


    Hi Nick,

    There is no solution for the two-click process to play that I can think of. The issue is in using a preview image and just how it works with activating the player after the click. Since it acts more as a switch and I don’t think it can actually communicate with the player itself.

    For the padding, you can do something like:

    .portfolio-sort-container.isotope .post-entry.flex_column {
    padding: 5px;
    box-sizing: border-box;

    You may need to have a firefox specific fix for border-box but you can read full details about it here and then test/fix as needed:




    Hi Devin,

    This instruction:

    .portfolio-sort-container.isotope .post-entry.flex_column {

    padding: 5px;

    box-sizing: border-box;


    did padd the entire block of portfolio elements — that’s not what I was after. I want to have space between the rows only. Can you assist?





    Please try this instead.

    .post-entry.flex_column.all_sort.no_margin.corporate_sort.one_third.portfolio-entry-description.isotope-item {
    margin-bottom: 40px;

    Adjust the bottom margin value.




    Thanks. I’ve gotten it to work.

    I am hoping that another solution for the “two clicks to play video” issue might be to disable the lightbox effect on the portfolio title links. I refer to your documentation that mentions:

    6. Javascript / Lightbox: a custom pretty photo skin

    the lightbox gets automatically applied to links that contain images, youtube videos, vimeo videos, mov files and swf files. if you don’t want to activate the lightbox on any of those links add the class ‘noLightbox’. if you manually want to apply the lightbox to a link you can add the rel=’lightbox’ attribute to the tag.

    I have found a few references elsewhere for disabling lightboxes — most notably the following: (Purchase code hidden if logged out) -link

    and —

    My questions are, do you think that disabling the lightbox effect will allow the portfolio title to link to the portfolio page in a way that will display the video immediately, and not behind a “lightboxed” image? And if so, can you please let me know where I should insert which strings of code? My knowledge at this point is pretty much limited to writing custom css to control appearances of things only. Thanks!



    BTW, I do see this info from the earlier thread: (Purchase code hidden if logged out)

    // activates the lightbox page

    my_lightbox(“a[rel^=’prettyPhoto’], a[rel^=’lightbox’]”,true);

    However, I cannot locate a custom.js file within Angular.


    No, the lightbox itself has nothing to do with the video autoplay feature. It even doesn’t support self hosted videos like on your page . I searched for a solution in the mediaelements docs: but it seems like the player doesn’t support an autoplay option/feature at the moment and thus it’s not easily possible to start the video directly. You can try to call the play() methode directly in avia.js but I’m not sure if this will work. Open up js/avia.js and replace:





    Thanks. I will try your suggestion.

    Just to clarify, all I would like to do is create a portfolio element that plays video — it doesn’t have to “auto-play” on page load. The trouble has been that the thumbnail image I use appears as a “lightboxed” image above the video. If there is an easy solution, I’d love to implement! :)

    Thanks again,



    I’m not sure why your videos are having that effect. The default behavior, as seen in the demo here for Sphere:

    Is that when the thumbnail is clicked, the video loads in and plays.


    HI Devin,

    That’s amazing — Sphere does work, which I would have sworn I’d seen when I demo’d the theme before purchasing. I’ve literally made all the portfolio videos now using a shortcode plug-in, as opposed to working directly with the portfolio component. Right now, I will keep it as is — when I have some time I will create another video via the portfolio and see if it behaves badly. If so, I will flag it here.

    BTW, I did follow the instructions in the documentation when I created the videos that originally raised this issue. The whole thing is rather odd! :)


    Yes, please do give it another try when you get the chance :)



Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Video requires two clicks to play’ is closed to new replies.