googlewebcomponents / google-youtube Goto Github PK
View Code? Open in Web Editor NEWYouTube video playback web component
Home Page: https://elements.polymer-project.org/elements/google-youtube
License: Other
YouTube video playback web component
Home Page: https://elements.polymer-project.org/elements/google-youtube
License: Other
<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/
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.
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.
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?
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:
Ideas how to resolve:
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.