Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sorry This video does not exist. #3

Open
JackVanson opened this issue Oct 4, 2021 · 1 comment
Open

Sorry This video does not exist. #3

JackVanson opened this issue Oct 4, 2021 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@JackVanson
Copy link

After finding out Vimeo has had issues with its embed code they have made some changes to how the videos are played. They now require a url parameter for example: https://player.vimeo.com/video/00000000?h=0000000abc. for any new videos being uploaded.

All my old vimeo videos still work fine. However any new videos I have uploaded haven't worked when lazy loading them on my website.

To fix this issue I have added a data-pram attribute to div.vi-lazyload and changed the js file to build the new formatted url. See below.

/********************************************************************
************************** MAIN VARIABLES ***************************
*********************************************************************/
var vimeo = document.querySelectorAll('.vi-lazyload'),

    vimeo_observer,                                                 //Intersection Observer API
    
    template_wrap,
    template_content,
    template_playbtn,
    template_logo,
    template_iframe,
    
    settings_observer_rootMargin    = '200px 0px',                  //Intersection Observer API option - rootMargin (Y, X)
    settings_thumb_base_url         = 'https://raw.githubusercontent.com/the-muda-organization/vimeo-lazyload/master/demo-img/',     //Base URL where thumbnails are stored
    settings_thumb_extension        = 'webp';                       //Thumbnail extension
    


/********************************************************************
************************ IF ELEMENTS EXIST **************************
*********************************************************************/
if(vimeo.length > 0){
    
    //create elements
    template_wrap       = document.createElement('div');
    template_content    = document.createElement('div');
    template_playbtn    = document.createElement('div');
    template_logo       = document.createElement('a');
    template_iframe     = document.createElement('iframe');
    
    //set attributes
    template_wrap.classList.add('vi-lazyload-wrap');
    template_content.classList.add('vi-lazyload-content');
    
    template_playbtn.classList.add('vi-lazyload-playbtn');
    
    template_logo.classList.add('vi-lazyload-logo');
    template_logo.target = '_blank';
    template_logo.rel    = 'noreferrer';
    
    template_iframe.setAttribute('allow','autoplay;fullscreen;picture-in-picture');
    template_iframe.setAttribute('allowfullscreen','');
    
    
    /********************************************************************
    ********************* INTERSECTION OBSERVER API *********************
    *********************************************************************/
    vimeo_observer = new IntersectionObserver(function(elements){
    
        elements.forEach(function(e){
            
            //VARIABLES
            var this_element    = e.target,
                
                this_wrap,
                this_content,
                this_playbtn,
                this_logo,
                this_iframe,
                
                this_data_id    = e.target.dataset.id,
                this_data_pram    = e.target.dataset.pram,
                this_data_thumb = e.target.dataset.thumb,
                this_data_logo  = e.target.dataset.logo;
            
            
            //if element appears in viewport
            if(e.isIntersecting === true){
                
                //wrap
                this_wrap = template_wrap.cloneNode();
                this_element.append(this_wrap);
                
                //content
                this_content = template_content.cloneNode();
                this_wrap.append(this_content);
                
                //background-image
                this_content.style.setProperty('--vi-lazyload-img','url("' + this_data_thumb +'")');
                
                //play btn
                this_playbtn = template_playbtn.cloneNode();
                this_content.append(this_playbtn);
                
                //logo link
                if(this_data_logo !== '0'){
                    this_logo       = template_logo.cloneNode();
                    this_logo.href  = 'https://vimeo.com/' + this_data_id;
                    this_content.append(this_logo);
                }
                
                //onclick create iframe
                this_playbtn.addEventListener('click',function(){
                    this_iframe     = template_iframe.cloneNode();
                    this_iframe.src = 'https://player.vimeo.com/video/' + this_data_id + '?' + this_data_pram + '&autoplay=1&autopause=0';
                    this_content.append(this_iframe);
                });
                
                //Unobserve after image lazyloaded
                vimeo_observer.unobserve(this_element);
                
                //LOG
                //console.log('DONE - ' + this_data_id);
            }
            
        });
        
    },{
        rootMargin: settings_observer_rootMargin,
    });
    
    
    /********************************************************************
    ********************* ITERATE THROUGH ELEMENTS **********************
    *********************************************************************/
    vimeo.forEach(function(e){
        
        //Intersection Observer API - observe elements
        vimeo_observer.observe(e);
        
    });
}

})();

@jakubmuda jakubmuda added the bug Something isn't working label Oct 4, 2021
@jakubmuda jakubmuda self-assigned this Oct 4, 2021
@jakubmuda
Copy link
Collaborator

It looks like h (hash) parameter is used for private videos. I will read more about it.

Important: If your video is set to the Private privacy setting, additional parameters must be added after the privacy hash parameter. This will appear directly after the video ID in the URL and looks similar to ?h=913062c8ff. Every parameter after the hash​ can be added using & rather than ?.
https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants