Okay
  Public Ticket #1278986
Vimeo lightbox
Closed

Comments

  • supermoccine started the conversation

    Hi, I am new to Wordpress, so this might be a dumb question, but I have been trying and researching for a while how to add vimeo videos to my home page that open in lightboxes. Can I ask how I can do this or where I can find info?

    I have tried making a lightbox portfolio item, but I'm not sure how to change the thumbnail to 16:9 and also the poster image is a weirdly placed. Also I don't want the items on my portfolio page, but I'm sure they can be removed somehow.

    I have also tried using the video player to embed video and add the video through "add media" via url, but all I get is a text link that takes me to my video at vimeo.com. I would very much appreciate some guidance.

    Thanks,

    Linnea

  • [deleted] replied

    Hi Linnea,

    I understand your situation. However I need to figure out where do you want to use vimeo lightbox videos. Is it possible to give me an example on your page so I can figure out a solution for you.

    P.S. Your website is in coming soon mode so I also need WP credentials to check your site.

    To include your credentials click Insert Credentials button in editor toolbar. (See how)

  •   supermoccine replied privately
  • [deleted] replied

    Hi Linnea,

    I have created custom code for you to enable Vimeo open on lightbox. Here is what you need to do:

    1. Please add the following code in functions.php (end of file):

    // Vimeo lightbox patch
    function vimeo_lightbox_enable_on_pages() {
    $post = get_queried_object();

    if ( is_a( $post, 'WP_Post' ) ) {
    $content = $post->post_content;

    if ( strpos( $content, 'vimeo.com' ) !== false ) {
    kalium_enqueue_lightbox_library();

    define( 'VIMEO_LIGHTBOXES_INIT', true );
    }
    }
    }

    function vimeo_lightbox_js_init() {
    if ( defined( 'VIMEO_LIGHTBOXES_INIT' ) ) {
    ?>
    <script>
    jQuery( document ).ready( function( $ ) {
    $( '.vc_single_image-wrapper' ).each( function( i, el ) {
    var $el = $( el ),
    isVimeo = $el.attr( 'href' ).match( /vimeo\.com\/[0-9]+/ );

    if ( isVimeo ) {
    $el.lightGallery( {
    selector: 'this'
    } );
    }
    } );
    } );
    </script>
    <?php
    }
    }
    add_action( 'wp_enqueue_scripts', 'vimeo_lightbox_enable_on_pages', 1000 );
    add_action( 'wp_footer', 'vimeo_lightbox_js_init', 1000 );

    2. To add a Vimeo video with lightbox:

    http://drops.laborator.co/WwDQf

    Basically insert "Single Image" element from visual composer, then set "On click action" to "Open custom link" and then on "Image link" insert vimeo video URL. After that the image will be lightbox clickable video.

  • supermoccine replied

    Thanks a lot Arlind! This did the trick. Now I can open vimeo videos in the lightbox.

    What about the second part of the question - the embed error? To make it more clear I made a new test item: http://www.linneaforslund.se/portfolio/vimeo-test/ I tried to embed videos from different years as well as others’ videos. I even included the video that embedded just fine at the bottom of the example item Piece of Cake. I added one youtube video for reference. Youtube videos seem to embed just fine.

    Why won't vimeo videos embed and what can I do to make it work? 

    Thanks,

    Linnea


  • [deleted] replied

    Hi Linnea,

    The problem with Vimeo videos (oEmbed) is because the WordPress uses a this method called "oembed" and after many researches (because other users had this issue as well) I've found that some videos does not support embedding on other sites (Vimeo doesn't allow that). For example this video:

    https://vimeo.com/44633289

    Can be displayed, I've added in the end of the videos list:

    http://www.linneaforslund.se/portfolio/vimeo-test/

    So for this you should contact the video author to allow your domain to embed videos.

    I hope I was clear on this.

  • supermoccine replied

    Hi Arlind,

    I'm not sure what you mean, I am the author of the videos I want to embed. The privacy settings allow anyone to view the videos and allow to embed them anywhere. Do you mean to contact Vimeo about it?

    Thanks,

    Linnea

  • [deleted] replied

    Hi Linnea,

    You can try to embed any other Vimeo video and you will see that it will work as i showed you on my example.

    Maybe you have any option for this on your Vimeo settings, but if you don't find anything related then please contact Vimeo directly and I think that they will know what is the problem and head you to the right direction.

    Thanks!

  • supermoccine replied

    Hi again Arlind,

    Thanks for all your response. I have made some new tests and another test portfolio item, and videos that didn't work in the first one works here:

    http://www.linneaforslund.se/portfolio/vimeo-test-2/

    I have no idea why this is, but I guess if it happens again I can just try to create a new item.

    Thanks a lot for your help!

    /Linnea

  • [deleted] replied

    Hi Linnea,

    I have found a plugin that may help you with this, so you don't need to create new item from the scratch:

    https://wordpress.org/plugins/oembed-cache/

    I haven't used it but depending on description it allows you to clean Embed cache for items that work on new items.