Skip to content

Instantly share code, notes, and snippets.

@mishudark

mishudark/ios.html

Last active January 7, 2018 18:17
Show Gist options
  • Save mishudark/676c1337e76d7623bb3c142eb1fc38e2 to your computer and use it in GitHub Desktop.
Save mishudark/676c1337e76d7623bb3c142eb1fc38e2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
const html = `<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#000;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
</style>
</head>
<body>
<div class="video-background">
<div class="video-foreground">
<div id="player"></div>
</div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: '2xdgGLKoJCE',
playerVars: {
controls: 0,
playsinline: 1,
disablekb: 1,
modestbranding: 1,
showInfo: 0,
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>`;
export default Trivia;
Raw
ios.html
<!--
Copyright 2014 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; width:100%%; height:100%%; background-color:#000000; }
html { width:100%%; height:100%%; background-color:#000000; }
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%%;
height: 100%%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%%; top: -100%%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%%; left: -100%%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
</style>
</head>
<body>
<div "video-background">
<div class="video-foreground" id="player">
</div>
</div>
<script src="https://www.youtube.com/iframe_api" onerror="window.location.href='ytplayer://onYouTubeIframeAPIFailedToLoad'"></script>
<script>
var player;
var error = false;
YT.ready(function() {
player = new YT.Player('player', %@);
player.setSize(window.innerWidth, window.innerHeight);
window.location.href = 'ytplayer://onYouTubeIframeAPIReady';
// this will transmit playTime frequently while playng
function getCurrentTime() {
var state = player.getPlayerState();
if (state == YT.PlayerState.PLAYING) {
time = player.getCurrentTime()
window.location.href = 'ytplayer://onPlayTime?data=' + time;
}
}
window.setInterval(getCurrentTime, 500);
});
function onReady(event) {
window.location.href = 'ytplayer://onReady?data=' + event.data;
}
function onStateChange(event) {
if (!error) {
window.location.href = 'ytplayer://onStateChange?data=' + event.data;
}
else {
error = false;
}
}
function onPlaybackQualityChange(event) {
window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
}
function onPlayerError(event) {
if (event.data == 100) {
error = true;
}
window.location.href = 'ytplayer://onError?data=' + event.data;
}
window.onresize = function() {
player.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>
Raw
youtube_fullscreen.html
<html>
<head>
<style>
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#vidtop-content {
top: 0;
color: #fff;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
</style>
</head>
<body>
<!-- <div class="video-background">
<div id="player" class="video-foreground"></div>
</div>
-->
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script src="https://www.youtube.com/iframe_api" onerror="window.location.href='ytplayer://onYouTubeIframeAPIFailedToLoad'"></script>
<script>
/*
var player;
var error = false;
YT.ready(function() {
player = new YT.Player('player', %@);
player.setSize(window.innerWidth, window.innerHeight);
window.location.href = 'ytplayer://onYouTubeIframeAPIReady';
// this will transmit playTime frequently while playng
function getCurrentTime() {
var state = player.getPlayerState();
if (state == YT.PlayerState.PLAYING) {
time = player.getCurrentTime()
window.location.href = 'ytplayer://onPlayTime?data=' + time;
}
}
window.setInterval(getCurrentTime, 500);
});
function onReady(event) {
window.location.href = 'ytplayer://onReady?data=' + event.data;
}
function onStateChange(event) {
if (!error) {
window.location.href = 'ytplayer://onStateChange?data=' + event.data;
}
else {
error = false;
}
}
function onPlaybackQualityChange(event) {
window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
}
function onPlayerError(event) {
if (event.data == 100) {
error = true;
}
window.location.href = 'ytplayer://onError?data=' + event.data;
}
window.onresize = function() {
player.setSize(window.innerWidth, window.innerHeight);
}
*/
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment