take an element and transform into a youtube iframe
add right before closing body tag
<body>
<script src="/path/to/plugin/youtube-api.min.js"></script>
</body>plugin will automatically be called on
document.querySelectorAll('[data-yt-client="true"])
each element must also have the [data-yt-videoid]
with a valid youtube video id
<!-- called automatically -->
<div data-yt-client="true" data-yt-videoid="[VIDEO_ID]"></div>
<!-- have to invoke plugin manually -->
<div class="some-class" data-yt-videoid="[VIDEO_ID]"></div>var elems = document.querySelectorAll('.some-class');
window.youtubeClient(elems, {
onAPIReady: () => {},
onStateChange: () => {},
playerVars: {
autoplay: 0,
controls: 0,
loop: 1,
modestbranding: 1,
showinfo: 0,
wmode: 'opaque'
}
});| option | description | default |
|---|---|---|
onAPIReady |
_called once on youtube api ready |
() => {} |
onStateChange |
_called on every youtube api state change |
() => {} |
playerVars |
playerVars to pass into youtube api |
(see below) |
{
onAPIReady: () => {},
onStateChange: () => {},
playerVars: {
autoplay: 0,
controls: 0,
loop: 1,
modestbranding: 1,
showinfo: 0,
wmode: 'opaque'
}
}