-
-
Notifications
You must be signed in to change notification settings - Fork 64
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
Consider providing an HTML fallback if JavaScript isn’t available #71
Comments
In this particular example, I had to enable third-party scripts from four additional domains
to make the video load. Of course, the exact list of domains depends on the individual website, but at least google.com and youtube.com are probably required in all cases. Ideally, I should not have to enable third-party scripts to get the link to the video. If an HTML-only fallback isn’t feasible, then the component could at least generate an |
Here’s an example of what I’m talking about. If JavaScript isn’t available, the embedded Codepen demo falls back to a paragraph with a link to the demo on codepen.io. This HTML is included in Codepen’s embed snippet itself, but as I said, if that’s not feasible, it could be inserted dynamically with a little bit of same-domain JavaScript. That would be better than nothing. |
@simevidas I think we can close this — I was able to add a link inside the custom element and that renders just fine with JavaScript disabled, but with JS enabled the link is replaced by the YouTube embed. So this was my bad for not adding in the fallback content. |
Maybe the documentation could be updated — I don't see an example of fallback content in the README. |
@jaredcwhite What you implemented on your site is pretty much the ideal fallback. It would be great if this could be the default functionality of the <a is="lite-youtube" href="http://youtube.com/watch?v=k85bq5leJPo"> That way, the component would function as a regular link that is then enhanced into an embedded video via JavaScript. |
It's basically a "can have my cake and eat it too" scenario; to your point, I'd need JavaScript to make do something, but I don't have JavaScript to do that. It's an implementor's dilemma; you have to compose something as the fallback as the component can't spin up in that case. On the plus side if you want a JavaScript disabled fallback, HTML has you covered with
Yeah, low tech, but works a treat.
I can explore adding that from a javascript-enabled domain blocked perspective. 👍 |
The problem with |
No disagreement, but your first case above was "Disable JavaScript in your desktop browser". There is nothing I can do about that, but an user of the component could use of
If it's a dead load (ala, you get no thread execution to enable the lifecycle), it's almost like a no javascript scenario. In that case, again, the user of the component would have to guard against that.
Given that there is no Given all that, the only scenario I can think of is the false start, where the lifecycle kicks, it has enough to build in the DOM but no video loads. I can work on that. 👍 |
I’ve been browsing the web with JS disabled by default for about one month, and from my experience, on some web pages there is a fallback, and on other web pages there is no fallback (it’s usually just a block of white space, with nothing rendered). That’s why I think it would be good if the component that embeds content provided the fallback by default. Could That way, the fallback would be on all sites (great for users), and the websites that use the component would not have to do anything extra. It would just work out of the box. |
@simevidas WebKit has intentionally stated it will never support custom element upgrades via |
As discussed on justinribeiro#71, there's not much the component can do itself to provide a fallback, but it's very valuable to document how the fallback works for people less familiar with web components. This adds a prominent example and educational info that will hopefully encourage people to provide a fallback for the numerous instances when it might be needed. It includes some [opinionated example styles](https://codepen.io/mrwweb/pen/qBKQOPW) which specifically call out using `aspect-ratio` to match the normal dimensions of a YouTube embed. Adding this documentation feels like enough to satisfy justinribeiro#71 in my opinion, but I'd like to hear @simevidas weigh in on that too. Additional minor change: remove whitespace at start of lines in playlist example that no other example code has.
As discussed on #71, there's not much the component can do itself to provide a fallback, but it's very valuable to document how the fallback works for people less familiar with web components. This adds a prominent example and educational info that will hopefully encourage people to provide a fallback for the numerous instances when it might be needed. It includes some [opinionated example styles](https://codepen.io/mrwweb/pen/qBKQOPW) which specifically call out using `aspect-ratio` to match the normal dimensions of a YouTube embed. Adding this documentation feels like enough to satisfy #71 in my opinion, but I'd like to hear @simevidas weigh in on that too. Additional minor change: remove whitespace at start of lines in playlist example that no other example code has.
Steps to reproduce:
What happened:
The embedded video did not render anything.
What should have happened:
A fallback link to the video on YouTube should have rendered instead of the embedded video.
The text was updated successfully, but these errors were encountered: