Comments (11)
from lite-youtube-embed.
87spd3KMs3U
from lite-youtube-embed.
<lite-youtube videoid="87spd3KMs3U">
<div class="lty-playbtn"></div>
</lite-youtube>
from lite-youtube-embed.
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;
}
}
}
from lite-youtube-embed.
@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?
from lite-youtube-embed.
This also happened to me when I loaded the script before using the element. Deferring the script solved the problem.
from lite-youtube-embed.
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
from lite-youtube-embed.
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.
from lite-youtube-embed.
@web2033 Do you have a minimal sample case that reproduces the issue?
from lite-youtube-embed.
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.
from lite-youtube-embed.
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
from lite-youtube-embed.
Related Issues (20)
- Failed to execute 'postMessage' HOT 2
- Type declarations
- On mobile, double click is neccesary HOT 8
- Display a title on the video thumbnail HOT 2
- Graceful degradation if YT API breaks
- NPM version is outdated HOT 1
- Custom Width and Height for Youtube shorts HOT 6
- Will it be counted as views on YouTube? HOT 2
- sometime no image loaded HOT 1
- does not work on mobile HOT 2
- Early click on Progressively Enhanced version directs user to youtube.com HOT 1
- A11Y: Why `a.lty-playbtn` instead of `button`? HOT 2
- Start and end params not working when using js-api
- I am using lite youtube embed and I want to get onStateChange player.getPlayerState():
- How can we keep the lower quality preview?
- Could we get a more noob friendly guide for Pro-usage? 😇
- Deprecated navigator.vendor HOT 1
- v0.3.2 Release HOT 1
- Yield on LiteYTEmbed click listener to reduce INP impact HOT 3
- Offering the class in ESM format
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lite-youtube-embed.