YouTube Player Demo
PEOPLE ARE AWESOME 2015
Source Code
<body>
<!-- web page layout scrollable section (notice the "overflow-y: auto" -->
<div style="overflow-y: auto">
<div id="player-cell"> <!-- notice the id="player-cell" -->
<!-- notice the id="demo-yt-player" and enablejsapi=1 -->
<iframe id="demo-yt-player"
type="text/html"
src="https://www.youtube.com/embed/vLT3A0a3hoQ?enablejsapi=1">
</iframe>
</div>
<!--As mentioned in the documentation we can specify the container for the annoto application.
We do it here because in our case the main web page layout (scrollable part) is not the body element.-->
<div id="annoto-app"></div>
</div>
<script src="https://app.annoto.net/annoto-bootstrap.js"></script>
<script>
var config = {
position: 'right',
align: {
horizontal: 'element_edge',
vertical: 'top',
},
width: {
max: 380,
},
features: {
darkTheme: true
},
widgets: [
{
player: {
type: 'youtube',
element: 'demo-yt-player' /* DOM element id of the player */
},
openOnLoad: true,
}
],
demoMode: true
};
if (window.Annoto) {
window.Annoto.on('ready', function (api) {
});
window.Annoto.boot(config);
} else {
console && console.error('Annoto: not loaded');
}
</script>
</body>