googlewebcomponents / google-youtube Goto Github PK

<google-youtube
  video-id="..."
  height="270px"
  width="480px"
  rel="0"
  start="5"
  autoplay="1">
</google-youtube>

Is that supposed to be state="5"?

Not sure if this is the right place to ask. please let me know if I should post this on a different repo

Adding loading="lazy" on iframe drastically boost the performance score in Page Speed Insights.
I tested it on one of my page with multiple YT videos and saw a massive improvement.
https://web.dev/iframe-lazy-loading/

Could you add loading="lazy" in the iframe ?

It would benefit people who are embedding YT videos on their websites and provide a better user experience.
Content editors don't need to modify anything as well. Simply copy paste into CMS.

Currently it's like this

I stumbled this issue while linting a component that is using google-youtube.
../bower_components/google-youtube/google-youtube.html:98:7
Property '_playsupportedLocalStorage' bound to attribute 'value' not found in 'properties' for element 'google-youtube'

Just add _playsupportedLocalStorage to the component properties.

Thank you.

I am trying to override the height of the thumbnail using mixins with height: auto !important; :
--google-youtube-thumbnail: { height: auto !important; // using !important does not override }; }
As you can see in the following example: https://jsbin.com/dudepucini/edit?html,console,output
By inspecting the thumbnail on the right with the dev tools, height: auto is not applied to the thumbnail img.

Most mobile browsers disallow starting <video> playback via an API call—it can only be initiated as a result of a user interaction. If you call play() on a <google-youtube> in an unsupported browser, the YouTube player ends up in a "stuck" state that can't be recovered from.

<google-youtube> should detect whether it's on a platform that doesn't support programmatic playback (via user agent sniffing, unless there are better ideas) and make play() a no-op on in that scenario. It should also publish an attribute indicating that play() isn't supported, so that developers could bind to it and, e.g., disable/hide a Play button in their page as appropriate.

I added to the (stripped down) demo a button which allows changing the video:

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../google-youtube.html">

<dom-module id="demo-element">
  <template id="page-template">
    <google-youtube id="custom"
                    video-id="yRbOSdAe_JU"
                    thumbnail="//www.polymer-project.org/images/logos/p-logo.svg">
    </google-youtube>

    <button on-tap='changeVideo'>Change video</button>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'demo-element',
    changeVideo: function(ev) {
        this.$.custom.videoId = '0GxteaIaj2Q';
        this.$.custom.thumbnail = 'http://i.ytimg.com/vi/0GxteaIaj2Q/hqdefault.jpg';
    }
  });
</script>

Initially, the user sees the first thumbnail:

Clicking on the thumbnail starts the correct video:

After clicking the button to change the video, the new thumbnail is shown but the video embed is still visible:

I would expect to see only the new thumbnail. I would expect that the video embed is no longer in the DOM.

google-youtube imports google-apis/google-apis.html which is the collection of all api definitions.
It should only import what it needs (google-youtube-api.html)

https://github.com/GoogleWebComponents/google-youtube/blob/master/google-youtube.html#L3

This worked for a few hours then stopped working with 401 errors.

I get this error when trying to get the component to play. it works flawlessly on a desktop browser though.

It's common to want to custom the embed video thumbnail. It would be nice if the element supported that use case. Another use case that's common is clicking an image and activating the video.

This web component should probably set wmode by default so that IE won't place videos above everything.

The way this element is now; If I place a google-youtube inside of a paper-scroll-header-panel the video will go over the paper-toolbar when scrolling on IE (Edge, and lower) which probably isn't desired behavior for most.

The player can be listened to for player state changes, but there is no way to arbitrarily grab the current player state. Perhaps it might be nice to internally set a property with the player state every time it changes.

With autoplay engaged, video soundtrack seems to be called twice, sometimes resulting in a hall effect. Pausing the video only stops one of the soundtracks.

google-youtube version 1.2.1
Chromium 51

When using full screen the app-drawer still shows on top of the video.

When the component is testing for play support, a black flash of a video element appears. This appears to be because the Polymer style for hiding this element when shimmed for Shady DOM is added to the document head as #playtest.google-yotube but the element created during the _determinePlaySupported function and added to the document.body has the #playtest id but not the google-youtube class. There is a workaround by adding the #playtest style to document CSS, but ideally the element should be able to handle this.

When you add the component, and you need to move it to another node, you can reuse the _player because on the attached function, the player is destroyed.

If you want to test this issue, add the component and then with a simple button, move the component to another node in your page.

When the YouTube iframe Player Embed decides to use Flash for playback, certain combinations of sizing/layout attributes can lead to the Flash player not properly filling the container—things look stretched/improperly scaled, and the controls aren't clickable.

This isn't an issue when HTML5 <video> is used for playback.

(CC: @ebidel)

Hello !

I'm trying to use this component on Safari, version 12.0.2 on MacOS 10.14.2.
The <google-youtube> is present into HTML DOM but nothing is displayed on the webapp. I have not any error into the JavaScript console.
On Google Chrome, it's working fine.

The full html:

<link rel="import" href="bower_components/google-youtube/google-youtube.html">
<google-youtube class="googleYouTube" video-id="l_BWeuz1k4c"></google-youtube>

CSS:

.googleYouTube {
  display: block;
  width: 480px;
  margin: 0 auto;
  height: 270px;
}

There is specs to apply to be able to work on Safari brower ?

There seem to be an issue when using fluid attribute into an iron-flex-layout that prevents the viewport of the video to be responsive.

Instead of padding-top on the host element, should be better to add it to the first children (div#container) to fit any kind of layout.

Will probably submit a PR.

Screenshot1 : initial padding top on :host element
Screenshot2 : padding top used on #container instead

Sometimes in Chrome (desktop), the playsupported property is erroneously set to false. It happens inconsistently, and sometimes a page refresh causes it to be set correctly. Device Emulator is not active, and this happens only in Chrome.

Cleanup when the element is detached form the DOM would be 👍

I'm working with a third party API that provides a URL to a Youtube video. Is is possible to use that (url) instead of a video ID with this element?

If not possible, is there an easy way to just extract the video ID from a URL?

https://developers.google.com/youtube/js_api_reference#setPlaybackQuality

Hey guys,

I tried to include a YouTube video into my site, unfortunately the fluid parameter isnt working.

<paper-material elevation="1">
    <google-youtube
        video-id="qyJ9xctOMCI"
        fluid="true"
        rel="0"
        start="0"
        autoplay="0">
    </google-youtube>
</paper-material>

The width of the embedded player is 100% but the height is only 150px small instead of a 16:9 ratio.

I'm not sure if this is an error on my part since I have tried most flags to try to get rid of related videos that popup just before video ends... does anyone know how to remove them? I know rel is for videos that appear after the video ends, but there doesn't seem to be one for the ones right before it ends. Thanks.

These are the flags I currently have set:
<google-youtube id="googleYouTube" video-id={{videoData.id}} currenttime={{currentTime}} height="100%" width="100%" autoplay="0" disablekb="1" controls="0" autohide="0" iv_load_policy="3" rel="0">

https://developers.google.com/youtube/player_parameters#cc_load_policy

To force cc for ay11 purposes.

When I have a <google-youtube> Custom Element configured like:

<google-youtube height="100%" width="100%" autoplay="1" videoid="Zlot0i3Zykw"></google-youtube>

the autoplay function works as expected.

However, when I change videoid in runtime, e.g.:

<google-youtube height="100%" width="100%" autoplay="1" videoid="qeMFqkcPYcg"></google-youtube>

the new video loads but it does not autoplay.

I noticed that there was a shortfall of methods that are included in the YouTube IFrame API, is this intentional or am I free to send a pull request?

https://github.com/GoogleWebComponents/google-youtube/blob/master/google-youtube.html#L131

There seems to be a default video set for google-youtube. I'd rather have the youtube error message than a random video in the event of an error.

Also seems to override the video I'm trying to play on about ever 3rd load.

I'd like to see a requestFullScreen method added to google-youtube so I can full screen my videos using my own chrome.

I am using this polymer component on a large SPA.
The problem occurs when the user navigates to another page, and the video keeps playing in the background of course, since its an SPA (like many polymer sites).

The core problem is that the component is not routing away. This is not a bug, but is a common best practice designer problem.

Steps to reproduce:

1. Place component on any page in an iron-pages element
2. In the browser, navigate to a different page. The video will keep playing.

Ideas how to resolve:

• If this component can detect that its page parent is no longer the one that the router is on, it can automatically stop. This is a good solution, because its emergent, and just works.
• At the Iron-Page, sense that the user has selected to navigate away, and tell the component to stop playing.
• Any other ideas welcome !!!!

Going to this page:
https://www.webcomponents.org/element/GoogleWebComponents/google-youtube

Results in redirect to itself.. I just want to see a demo ;-)

The example uses rel="0" but I can't find this param in the element. Is it leftover?

 <google-youtube
      videoid="..."
      height="270px"
      width="480px"
      rel="0"
      start="5"
      autoplay="1">
    </google-youtube>```

https://github.com/GoogleWebComponents/google-youtube/blob/master/bower.json

I get a lot of resolution errors when installing this element using bower. We should update it to use the latest:

PolymerLabs/google-apis#master
Polymer/polymer#~0.3.3

The README contains nothing but one dead link.

Tests were not ported to wct from Polymer 0.5