404 on default image

[Onyemobi]

After loading the code in my CRM, I get a 404 on the default image ( https://i.ytimg.com/vi/null/hqdefault.jpg ) despite it showing up on my screen. Furthermore, the Youtube embed does not play.

[paulirish]

Can you share the videoid ?

…

On Mon, Dec 23, 2019, 11:11 AM Onyemobi ***@***.***> wrote: After loading the code in my CRM, I get a 404 on the default image ( https://i.ytimg.com/vi/null/hqdefault.jpg ) despite it showing up on my screen. Furthermore, the Youtube embed does not play. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#45?email_source=notifications&email_token=AAAJSF3AS3YK5EVNUQXAMUTQ2DIJJA5CNFSM4J6VE5X2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4ICLDWSQ>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAJSF52UG62PMPAE37P2I3Q2DIJJANCNFSM4J6VE5XQ> .

[Onyemobi]

87spd3KMs3U

[Onyemobi]

<lite-youtube videoid="87spd3KMs3U">
    <div class="lty-playbtn"></div>
</lite-youtube>

[lborgman]

I use something like this. Not sure why anymore...

    async function getArturlImg(url) {
        if (!ytId) return undefined;
        async function checkImg(url) {
            const img = new Image();
            return new Promise((resolve, reject) => {
                img.onload = function () {
                    // console.warn(`Found ${url}`);
                    resolve(img);
                };
                img.onerror = function () {
                    // console.error(`Did not find ${url}`);
                    resolve();
                };
                img.src = url;
            });
        }
        let imgUrls = [
            `https://img.youtube.com/vi_webp/${ytId}/maxresdefault.webp`,
            `https://img.youtube.com/vi/${ytId}/maxresdefault.jpg`,
            `https://img.youtube.com/vi/${ytId}/default.jpg`,
        ];
        if (url) { imgUrls.unshift(url); }
        for (let i = 0, len = imgUrls.length; i < len; i++) {
            const url = imgUrls[i];
            const img = await checkImg(url);
            if (img) {
                if (img.naturalWidth === 120) {
                    if (i !== len - 1) {
                        // console.error(`Probably got YouTube fallback image, ${i}, ${len}: ${url}`);
                        continue;
                    }
                }
                return img;
            }

        }
    }

[Garbee]

@Onyemobi Your default image URL has null where the ID should be. What CRM are you using and did you do any special integration module? Or is it just putting the direct HTML into a content block?

[rbardini]

This also happened to me when I loaded the script before using the element. Deferring the script solved the problem.

[pinkiebala]

I've run into the same situation when using lite-youtube with React.

According to spec:

The element must not gain any attributes or children, as this violates the expectations of
consumers who use the createElement or createElementNS methods.

In general, work should be deferred to connectedCallback as much as possible

Related issue: #44
Happy to see that it may be fixed in #28

[ghost]

I have the same issue with a statically generated site using Nuxt.js
It works on the first-page load, but after navigating to a different page and returning to a page with a video - https://i.ytimg.com/vi/null/hqdefault.jpg and no longer can play it.

I used the same videoid from Readme.

[Garbee]

@web2033 Do you have a minimal sample case that reproduces the issue?

[ghost]

Do you have a minimal sample case that reproduces the issue?

@Garbee https://codesandbox.io/s/brave-pascal-cezu9

The first load works. Navigate to About Page and then back to Home and it doesn't work.

[paulirish]

The majority of the above cases were fixed in 0221be1 This is where you saw null in the image url.. it was because we used getAttribute before the element was available. (the true issue was #44 )

The @lborgman comment is more about using the best thumbnail available, which i've opened a dedicated issue for: #70