Installing this module via npm install as suggested in the README downloads a release without the .lyt-visually-hidden class. It's trivial to add the class again to the CSS but kind of misses the point of using npm here :)

How to make it responsive?

I tried manually setting a high res placeholder using the following markup. The maxresdefault.jpg image displays initially, but as soon as the custom element script kicks in, the maxresdefault.jpg version gets replaced with the hqdefault.jpg.

That replacement seems to happen here: https://github.com/paulirish/lite-youtube-embed/blob/master/src/lite-yt-embed.js#L33-L37

<lite-youtube videoid="OBmlCZTF4Xs" style="background-image:url('https://i.ytimg.com/vi/OBmlCZTF4Xs/maxresdefault.jpg')">
  <div class="lty-playbtn"></div>
</lite-youtube>

In my layout, the <lite-youtube> element takes up the entire width of the page, so the hqdefault image is really blocky and blurry. Especially on larger screens like tablets and laptops.

The comment on line 21-36 mentions something about doing a fallback from sqdefault -> hqdefault. How would you feel about an additional parameter to set the wanted placeholder size and only fall back to hqdefault in case the wanted image size isn't available.

Maybe something like this, where you provide one of the following sizes:

<lite-youtube videoid="..." placeholder="sd|mq|hq|maxres">

...or a full URL. That would probably be easier for users to understand, without having to dig through supported youtube image sizes. It would also allow custom placeholder images:

<lite-youtube videoid="..." placeholder-url="https://i.ytimg.com/vi/OBmlCZTF4Xs/maxresdefault.jpg">

The video I'm testing with is https://www.youtube.com/watch?v=OBmlCZTF4Xs

My apologies for jumping on this so quickly but I thought it was a very cool project (added the Apache-2.0 license mentioned in #31) I started a fork for the Vimeo player which has some small improvements I think around configuration and including CSS in the JS bundle unless you decide to go a different route. would be cool to have no need for build tools but not sure if that's doable.

Feel free to close this issue, just wanted to ping here. Cheers!

Link: https://github.com/luwes/lite-vimeo-embed

I have an oEmbed field with a handle of: videoUrl

I pasted the youtube url for a video into the field: https://www.youtube.com/watch?v=BAtlRhAteY4

I then output the iframe using this snippet of code in my twig file:

{{ entry.videoUrl.render({ params: { rel: 0 } }) }}

I expect to see &rel=0 in the iframe markup, this is what I see when I inspect the page:
<iframe width="480" height="270" src="https://www.youtube.com/embed/BAtlRhAteY4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

There is no caching enabled on the site.

iOS devices and perhaps Safari on Macs won't begin playing the video after clicking on the thumbnail. Rather, the iframe replaces the img tag and the user must tap or click the play button a second time. This is not an ideal user experience. My assumption is that the browser is preventing injected iframe elements from autoplaying with sound turned on. Not sure if there is any way around this or if we should simply use "loading=lazy" on our youtube embeds instead of this program.

I noticed this repository doesn't have any license attached. Could you add one, please? See Choose a License for more information 🙂

Hi, It does not count the views on youtube. Should I configure any parameters?

Thanks a lot

Hey @paulirish, thanks for this, looks really cool!

Just testing the waters - not looking to start a flame war or anything:

For React users, would you be open to linking to the React version of this at the bottom of the Readme?

In #3, @Garbee separated out the customElements.define() call so the developer had control over it.

In a way this is kinda annoying... for example the dumb onload handler i had to do here:

I'm considering putting that back in as part of the script, basically taking registration away from the developer. This also means the custom element class wouldn't necessarily need to be a global.

I need help here, this isn't my area of expertise. ;)

I don't love the idea that JS has to be run in order for the styles to be added to the page.

This thing should still look great if the JS is in a <script async> and delivered really late.

What is the best practice for packaging a web component such that its straightforward for someone to npm install it but with styles built separately from the JS?

Hi, I'm having issues with the JS API with GTM.

I had the following HTML which worked fine with my GTM installation and its current triggers:

<iframe src="https://www.youtube.com/embed/<?= $video_id ?>?enablejsapi=1"> </iframe>

Then I implemented lite-youtube and I have the following HTML on my website:

<lite-youtube videoid="<?= $video_id ?>" style="background-image: url('https://i.ytimg.com/vi/<?= $video_id ?>/hqdefault.jpg');" params="enablejsapi=1">
	<button type="button" class="lty-playbtn" title=""></button>
</lite-youtube>

Unless I load "https://www.youtube.com/iframe_api" on the page itself, my GTM triggers don't trigger. I can load it below the fold, so it's not that big a deal, but in that case, should I even add "enablejsapi=1" to the parameters, or is there a way to make it work natively with GTM?

Add ability to tab into the play button and add descriptive text for assistive technologies.

forked from #37

The question is "what is the ideal accessibility experience for a (unplayed) video embed?"

How should it be made accessible to AT like screenreaders?

First, the play button should definitely be a semantic button (#9), but I suppose there are other opportunities, like a general aria-label on the parent container, etc.

My quick googling points to these resources:

• https://adrianroselli.com/2017/08/inaccessible-youtube-embeds.html
• https://github.com/videojs/video.js/pull/3227/files

But i imagine there's more.

I've captured the general problem here: https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md

Two things we can do:

• Do the sddefault->hqdefault fallback
  • When doing this, apply referrerpolicy (ampproject/amphtml#3940)
• Consider using webp if supported, falling back to jpg

A few other bugs have touched on this mostly #54

I can't work out how to add playlists if possible. :)

If not please can this be added then all the embeds across my site can be replaced.

Great project thanks

In Chrome, I get CORS errors in the console using this plugin:
Access to image at 'https://i.ytimg.com/vi/_2aH3Z7YRZ4/hqdefault.jpg' from origin 'https://www.megunolink.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Maybe YouTube is indicating they don't want their images to be used this way? The thumbnail is present when I scroll the video into view, so I'm a bit unclear whether this is a real problem or not.

As a solution, I added a poster attribute to a hosted image by replacing
this.posterUrl = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
with
this.posterUrl = this.getAttribute('poster');
in lite-yt-embed.js

Then the tag becomes:
<lite-youtube videoid="_2aH3Z7YRZ4" poster="https://www.megunolink.com/wp-content/uploads/2020/06/introvideothumbnail.jpg" ></lite-youtube>

Custom elements are intended to be able to define their own plain attribute names and not have to use data-attributes. Plain videoid should be fine.

Spawning from discussion in #80

Currently the lite embed only works in the enhanced privacy mode. Since the URL is hard-coded to use the "no cookie" serving. This can cause potential problems with some types of content if a publisher allows it to be embedded while being protected by a paywall for example.

A new attribute should be introduced which will remove the no cookie from the iframe URL. My personal preference is calling it reduced-privacy which is directly opposite of the default of using what YouTube calls "Enhanced Privacy".

The attribute, regardless of final name, should be a boolean attribute. Meaning it's presence alone triggers the effect and any values assigned are ignored.

I've working on a similar implementation. Here is a couple of ideas.

• Used the a tag <a href="https://youtu.be/3vBwRfQbXkg" class="ytlight">HOW TO FUNK IN TWO MINUTES</a>. If the user has JavaScript disabled, it can go to the video anyway.
• Lazy load the thumbnail.
• The quality of the thumbnail to load is decided with NetworkInformation.effectiveType.

POC

Test page lite-youtube-embed
Test page ytlight

I used this example (a slightly changed version in another branch) to test this:

https://lite-youtube-embed-di5l7i0ce.now.sh/

It works as expected on my desktop (Windows 10) in Chrome, but not in latest Chrome on Android 10.

Looking at the element it creates an embed with a hard-coded size. By allowing custom attributes to be used to give a size (and handle their changing events) we can allow developers to get the size they need seamlessly.

While carrying this out, we'll follow the best practices for custom elements where applicable.

Spec: JavaScript HTMLElement.dataset, HTML data-*.

Replace videoid with data-videoid and #29 startTime with data-starttime (notice: attributes should be in lowercase). If you like can use instead data-video-id (accessible in HTMLElement.dataset.videoId) and data-start-time. Personally I would prefer shorter data-id and data-time. Element <lite-youtube> already makes clear that it is related to YouTube making understandable to what id refers.

There is this param called t in youtube, which you can add in the url and after video is loaded, it will play from the given timestamp.

It can be provided in XhXmXs format, ie: https://www.youtube.com/watch?v=XvZ7-Uh0R4Q&t=13m37s

Support for it would be a nice feature, bringing lite-youtube-embed closer to the native experience. :)

Whoops I used both! My bad

lyt- is probably good. This is arguably a breaking change. :/

Hi Guys,

I was wondering if this has safari support to? I've tried to implement it on a website, and on safari I'm getting a strange repeated background image and i don't see any play button, I also can't click the video to let it play.

Thanks in advance!

grts

I found a trouble when testing my version on mobile Chrome. I thought I might have made some stupid mistake and wanted to see how the original version worked. I could not find any test example here.

There might be some example, but I have no idea how to find it. Please link to a test example in readme.md.

This was briefly mentioned in #48 but since Firefox now supports loading="lazy", does it make sense to investigate moving away from background: url(...); and into inserting an <img src="..." loading="lazy" alt="" aria-hidden="true"/> tag as the cover image instead?

Lighthouse keeps bugging me to defer my lite-youtube cover images, so I wanted to see if others were having the same before I make something janky or something good, haha

I'd be happy to help!

In the Pro-Usage section

<lite-youtube videoid="ogfYd705cRs"

I believe that property should be videoId (with capital "I")

a la https://github.com/GoogleChrome/web.dev/pull/1881/files

Will need some research to understand the semantics here and also the fallback story.

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.

It's not an issue, just a feature request. Could you consider adding support for extra URL params, like
<iframe ... src="https://www.youtube.com/embed/${this.videoId}?autoplay=1&start=10&end=30"</iframe>

I think it can look something like:
<lite-youtube videoid="..." params="start=10&end=30"></lite-youtube>

Can I change the video id and make it play the new video after rendered?

Ref 1: https://github.com/webcomponents/gold-standard/wiki
Ref 2: https://developers.google.com/web/fundamentals/web-components/best-practices

This is more of a meta-issue to discuss what overall goals we want to go after. Then the individual bits we wish to go after can be broken down into their own sub-issues for PRs to go against.

Does anyone in the community have any alternative recommended guidelines? Particularly interested in anything that conflicts with the guiding points laid out in gold-standard.

For any set of goals, individual issues should be opened describing it and a proposed solution. From there we can try to have some discussion before anyone digs heavy into the coding side.

The goal here, is to provide a baseline element that works along the lines of what the community expects from web components. While preserving the heavy focus on overall performance. With each individual goal to build up to this, the performance impacts need to be kept in mind.

Just a heads up, I fixed a small bug in lite-vimeo.

this.getAttribute() should not be called in the custom element constructor as it's possible the attribute is not defined yet at that point. happens when the script tag comes before the <lite-youtube> element.

luwes/lite-vimeo-embed@10f31db

https://stackoverflow.com/a/42251436/268820

Thanks for this!
Is there a way to insert your own cover image for a video?

We currently use this jQuery plugin - http://fitvidsjs.com/ and how will that work with this new plugin?

Hello.
On my site in the records a lot of videos are added from youtube !! How to optimize already uploaded videos to a site using your plugin?
for this you need to write an additional script that would find the id in the pages from the youtube player code and add them to < lite-youtube videoid = " Id_video" > </ lite-youtube > ?
Please tell me how to optimize the videos already added to the site .. I have a lot of them on the site !!

What is open? Can we get a mvp release?

I need to move copy link icon to left so that my menu bar buttons don't override the copy link icon. Is it possible to do so ?
because I am unable to do it my making changes in LiteEmbed.css.

I am using the (npm install react-lite-youtube-embed -S) and taking refrence from https://www.npmjs.com/package/react-lite-youtube-embed.

I currently use these to responsively size the video:

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

which is the de-facto best practice to do so, correct me if I'm wrong please.

Any way this could be integrated into lite-youtube-embed itself?

Opening a discussion on NPM packaging requirements. Sadly there are a few "best practices" articles around but none quite cover the nuance or context of most decisions. Let's just air what we think a bit and then roll forward.

In the context of this component, I think all we'd really need to distribute via NPM itself is the script and stylesheet. All the HTML and possible markdown files (hopefully just one or two when we're done) are not that useful when integrating and deploying. Those are very much dev time oriented. Given my current experience knowing how some organizations need to scrutinize and approve everything that operates on their system's, I'd say we should use npmignore to only package the bits that need to be in the distribution. This way anyone that needs to get what we provide audited should have an easier time.

Beyond just minimizing what is in the package to the absolute necessities I don't have any real concerns with how we package this (as long as we attempt to obey SemVer.) Does anyone else have other concerns with packaging? Or any hard objections to stripping the package distributed to the bare minimum?

Need some events when video start/stop, to control playing another video blocks

I encounter this issue in my project, by I can reproduce it on the demo page by these steps:

1. Open demo https://paulirish.github.io/lite-youtube-embed/variants/solo.html
2. Edit it's HTML in chrome devtools and insert content like that:
   <lite-youtube videoid="ogfYd705cRs"/> HELLO
   I recorded a gif, you can check it here
3. Apply editing and see what's happening:

The "HELLO" word goes into tag

The existing button is a implemented with the CSS box model. The actual YouTube has subtle curvature around the box, which is very hard to achieve with pure CSS.

Consider replace the CSS with an SVG, either as background image or as HTML. I'm happy to assist by creating a PR if you are ok with it. @paulirish

1. 1st tap to render the actual YouTube embed
2. 2nd tap to play the actual YouTube embed

I think the video poster is part of the content and therefore should exist as an actual <img> element in the page instead of background. Of course that would also require an alt description to be provided. What do you think?

It would help the webmasters to don't mention it on their cookie banners (cookiebot)

Example Embed
https://www.youtube-nocookie.com/embed/ogfYd705cRs

In addition to these already available variables

entry.field.media.title
entry.field.media.description
entry.field.media.url
entry.field.media.type
entry.field.media.tags
entry.field.media.images
entry.field.media.image
entry.field.media.imageWidth
entry.field.media.imageHeight
entry.field.media.code
entry.field.media.width
entry.field.media.height
entry.field.media.aspectRatio
entry.field.media.authorName
entry.field.media.authorUrl
entry.field.media.providerName
entry.field.media.providerUrl
entry.field.media.providerIcons
entry.field.media.providerIcon
entry.field.media.publishedDate
entry.field.media.license
entry.field.media.linkedData
entry.field.media.feeds

Could you add:

entry.field.media.id
entry.field.media.embed_url

The reason I think it would be helpful is if someone wanted to build their own iframe element, they can build their own iframe tag and apply params like &rel=0 to it