Fullscreen example
The fullscreen example adds a custom button to help displaying the subtitle in fullscreen mode.
<div id="fullscreen-container" style="width: 100%; height: 400px;">
<iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/fGPPfZIvtCw" frameborder="0" allowfullscreen="true"></iframe>
</div>
<script src="static/vendor/youtube.external.subtitle/youtube.external.subtitle.js"></script>
<button id="fullscreen-btn">Fullscreen</button>
<script>
var subtitle = [
{
"start": 10.28,
"end": 11.5,
"text": "PO: Master Shifu?"
},
{
"start": 13.4,
"end": 14.86,
"text": "Good time? Bad time?"
},
{
"start": 15.52,
"end": 17.8,
"text": "SHIFU: Time is an illusion,"
},
{
"start": 18,
"end": 20.96,
"text": "there is only the now."
},
{
"start": 20.96,
"end": 23.4,
"text": "PO: So now's a... good time?"
},
{
"start": 23.4,
"end": 24.16,
"text": "SHIFU: Oh..."
},
{
"start": 25.64,
"end": 29.52,
"text": "SHIFU: You must take the next step on\nyour journey from warrior to teacher"
},
{
"start": 29.6,
"end": 30.52,
"text": "PO: But I'm no good at it"
},
{
"start": 30.7,
"end": 33.72,
"text": "PO: Oh no! It's the dragon teacher! He's so handsome!"
},
{
"start": 33.72,
"end": 35.199,
"text": "WA-TAIIII!"
},
{
"start": 37.94,
"end": 38.8,
"text": "MR. PING: Po?"
},
{
"start": 38.8,
"end": 41.099,
"text": "PO: Oh heyy, Dad. What's up?"
},
{
"start": 41.42,
"end": 42.38,
"text": "SHIFU: You're terrible at it."
},
{
"start": 43.62,
"end": 45.099,
"text": "PO: Who... are you?"
},
{
"start": 45.52,
"end": 47.42,
"text": "LI: I'm looking for my son"
},
{
"start": 48.76,
"end": 49.339,
"text": "PO: Dad?"
},
{
"start": 49.44,
"end": 50.68,
"text": "LI: Give your old man a hug!"
},
{
"start": 53.96,
"end": 56,
"text": "MR. PING: How do we know he's even related to you?"
},
{
"start": 56.02,
"end": 57.14,
"text": "LI: Look at that!"
},
{
"start": 61.44,
"end": 62.559,
"text": "LI: Come with me."
},
{
"start": 62.56,
"end": 65.68,
"text": "There's a secret panda village in the mountains."
},
{
"start": 67.08,
"end": 67.88,
"text": "PO: Whoa..."
},
{
"start": 67.94,
"end": 69.46,
"text": "LI: Welcome home, son"
},
{
"start": 70.2,
"end": 72.76,
"text": "PO: You look just like me, but a baby."
},
{
"start": 72.76,
"end": 74.36,
"text": "You're like me but old"
},
{
"start": 74.52,
"end": 76.22,
"text": "GRANDMA PANDA: Ohh... He's adorable!"
},
{
"start": 77.6,
"end": 78.3,
"text": "Ow!"
},
{
"start": 79.7,
"end": 80.76,
"text": "I'm good!"
},
{
"start": 82.54,
"end": 84.54,
"text": "KAI: Kai has returned!"
},
{
"start": 84.9,
"end": 85.4,
"text": "Who?"
},
{
"start": 85.54,
"end": 87.6,
"text": "KAI: The Master of Pain. Beast of Vengeance."
},
{
"start": 87.6,
"end": 88.759,
"text": "Maker of Widows..."
},
{
"start": 88.76,
"end": 89.26,
"text": "Eh?"
},
{
"start": 89.26,
"end": 91.04,
"text": "KAI: Okay, I used to work with Oogway..."
},
{
"start": 91.04,
"end": 92.78,
"text": "Oh! Master Oogway!"
},
{
"start": 92.8,
"end": 94,
"text": "KAI: Silence!"
},
{
"start": 94,
"end": 96.16,
"text": "TIGRESS: Kai attacked the valley."
},
{
"start": 96.16,
"end": 97.08,
"text": "It's all gone."
},
{
"start": 97.44,
"end": 99.2,
"text": "Now he's coming for the pandas."
},
{
"start": 99.64,
"end": 101.72,
"text": "You must teach them to fight."
},
{
"start": 102.32,
"end": 103.839,
"text": "PO: I am ready."
},
{
"start": 104.72,
"end": 106.46,
"text": "I'm gonna turn you into kung fu masters"
},
{
"start": 106.74,
"end": 107.52,
"text": "HAI!"
},
{
"start": 111.48,
"end": 113.36,
"text": "Nobody said this was gonna be easy."
},
{
"start": 113.8,
"end": 115.02,
"text": "MEI MEI: Get ready to dance..."
},
{
"start": 115.12,
"end": 116.36,
"text": "...with danger!"
},
{
"start": 118.36,
"end": 119.96,
"text": "PO: Enemies of justice. Prepare for..."
},
{
"start": 119.96,
"end": 122.08,
"text": "Whoa! Are you kidding me?"
},
{
"start": 122.44,
"end": 124.64,
"text": "Whoa! Ah! Ow!"
},
{
"start": 125.8,
"end": 128,
"text": "KAI: You must be the dragon warrior."
},
{
"start": 128,
"end": 130.12,
"text": "PO: How bout you spare me the chit chat?"
},
{
"start": 130.12,
"end": 131.12,
"text": "KAI: I'm going to take your..."
},
{
"start": 131.12,
"end": 132.38,
"text": "PO: Ugh. Chit chat!"
},
{
"start": 132.38,
"end": 132.88,
"text": "KAI: In the-"
},
{
"start": 132.88,
"end": 133.82,
"text": "PO: Chitt chitty chat chat."
},
{
"start": 133.88,
"end": 134.38,
"text": "KAI: In..."
},
{
"start": 134.46,
"end": 135.42,
"text": "PO: Chat chat chat."
},
{
"start": 136.06,
"end": 136.56,
"text": "KAI: In the-"
},
{
"start": 136.66,
"end": 137.16,
"text": "PO: Chit chat."
},
{
"start": 137.92,
"end": 139.2,
"text": "PO: Yee haw!"
},
{
"start": 140.32,
"end": 141.38,
"text": "MANTIS: Got to get in there."
},
{
"start": 141.4,
"end": 141.96,
"text": "CRANE: But Master Shifu said..."
},
{
"start": 142.02,
"end": 143.26,
"text": "MANTIS: You're seriously afraid?"
},
{
"start": 143.34,
"end": 146.06,
"text": "Even Master Chicken's going in there, and he's a chicken."
},
{
"start": 146.2,
"end": 147.7,
"text": "MASTER CHICKEN: Bock-bock bocka!"
}
];
var youtubeExternalSubtitle = new YoutubeExternalSubtitle.Subtitle(document.getElementById('video'), subtitle);
document.getElementById('fullscreen-btn').addEventListener('click', function(e) {
var elem = document.getElementById('fullscreen-container');
var openFullscreen = function() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
};
openFullscreen();
});
</script>