- Replaces DOM element with YouTube player on click.
- Auto-plays video when it's ready.
- Reads YouTube video ID and params from element's attributes.
- Reads loading class name from element attribute and adds it while the player is loading.
- Loads YouTube API only when needed (on click and pre-load on hover) and only once (looks for window.YT or existing script tag first).
<youtube-player-component
data-video-id="m7MtIv9a0A4"
data-loading-class-name="loading"
data-player-variables='{ "controls": 0, "modestbranding": 1 }'
>
Preview here
</youtube-player-component>
<!-- Import all components you use -->
<script src="@joinbox/youtubeplayer/YouTubePlayerElement.js"></script>
<youtube-player-component></youtube-player-component>
-
data-video-id
: ID of the YouTube video to play. -
data-loading-class-name
: Class that should be added to<youtube-player-component>
while the YouTube player (script) is loading. -
data-player-variables
: Player parameters for YouTube. -
data-use-cookies
(boolean): If set, YouTube videos will be loaded from regular youtube.com domain; if not set, the videos will be loaded from the youtube-nocookie.com domain (by setting the host parameter to the corresponding URL when the API is initialized).
- Exposes a
player
property on the custom element that corresponds to the instance of YT.Player for the current video