mirror of
https://github.com/fortressforever/fortressforever-web.git
synced 2024-11-25 13:31:43 +00:00
Add short autoplaying looping video over the youtube embed
* Thanks to RocKwell for the idea, the edited clips (taken from @FDA-'s #ff.pickup avi), and the grid overlay * Clicking on the looping video will start the youtube playlist that was previously embedded as normal
This commit is contained in:
squeek
parent
08816ea566
commit
1eaff08ca3
4 changed files with 70 additions and 1 deletions
|
|
@ -357,6 +357,47 @@ ul.developer-list { list-style: none; }
|
||||||
.simple-icon-link img { margin-right: 0.5em; opacity: 0.75; margin-left: -0.25em; }
|
.simple-icon-link img { margin-right: 0.5em; opacity: 0.75; margin-left: -0.25em; }
|
||||||
.simple-icon-link:hover img { opacity: 1; }
|
.simple-icon-link:hover img { opacity: 1; }
|
||||||
|
|
||||||
|
#bgvid {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: -9%;
|
||||||
|
z-index: 10;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.embed-container {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.video-loop-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
min-height: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('../images/grid2.png');
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 11;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.video-loop-overlay:hover .ytp-large-play-button-svg {
|
||||||
|
fill: #cc181e;
|
||||||
|
}
|
||||||
|
.video-play-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 12;
|
||||||
|
width: 85px;
|
||||||
|
height: 60px;
|
||||||
|
margin-left: -42px;
|
||||||
|
margin-top: -30px;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.video-play-button .ytp-large-play-button-svg {
|
||||||
|
opacity: .9;
|
||||||
|
}
|
||||||
|
|
||||||
@media not print {
|
@media not print {
|
||||||
.z-depth-1 {
|
.z-depth-1 {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
|
||||||
BIN
images/grid2.png
Normal file
BIN
images/grid2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 994 B |
BIN
images/yt-thumb.jpg
Normal file
BIN
images/yt-thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
|
|
@ -29,7 +29,35 @@ $news_content = str_replace("\n", "<br />", $news_content);
|
||||||
</div>
|
</div>
|
||||||
<div class="header-half pull-right">
|
<div class="header-half pull-right">
|
||||||
<div class="abs-center">
|
<div class="abs-center">
|
||||||
<div class="embed-container z-depth-1"><iframe src="https://www.youtube.com/embed/-0-6wdDyGLI?list=PL5KX7r5FIS6ob8gqYTJzBUJV7c_j0dCm6" frameborder="0" allowfullscreen></iframe></div>
|
<div class="embed-container z-depth-1">
|
||||||
|
<div id="autoloop-video" onclick="this.parentNode.removeChild(this); startMainVideo();">
|
||||||
|
<div class="video-loop-overlay">
|
||||||
|
<div class="video-play-button" role="button" aria-label="Play">
|
||||||
|
<svg><path fill-rule="evenodd" clip-rule="evenodd" fill="#1F1F1F" class="ytp-large-play-button-svg" d="M84.15,26.4v6.35c0,2.833-0.15,5.967-0.45,9.4c-0.133,1.7-0.267,3.117-0.4,4.25l-0.15,0.95c-0.167,0.767-0.367,1.517-0.6,2.25c-0.667,2.367-1.533,4.083-2.6,5.15c-1.367,1.4-2.967,2.383-4.8,2.95c-0.633,0.2-1.316,0.333-2.05,0.4c-0.767,0.1-1.3,0.167-1.6,0.2c-4.9,0.367-11.283,0.617-19.15,0.75c-2.434,0.034-4.883,0.067-7.35,0.1h-2.95C38.417,59.117,34.5,59.067,30.3,59c-8.433-0.167-14.05-0.383-16.85-0.65c-0.067-0.033-0.667-0.117-1.8-0.25c-0.9-0.133-1.683-0.283-2.35-0.45c-2.066-0.533-3.783-1.5-5.15-2.9c-1.033-1.067-1.9-2.783-2.6-5.15C1.317,48.867,1.133,48.117,1,47.35L0.8,46.4c-0.133-1.133-0.267-2.55-0.4-4.25C0.133,38.717,0,35.583,0,32.75V26.4c0-2.833,0.133-5.95,0.4-9.35l0.4-4.25c0.167-0.966,0.417-2.05,0.75-3.25c0.7-2.333,1.567-4.033,2.6-5.1c1.367-1.434,2.967-2.434,4.8-3c0.633-0.167,1.333-0.3,2.1-0.4c0.4-0.066,0.917-0.133,1.55-0.2c4.9-0.333,11.283-0.567,19.15-0.7C35.65,0.05,39.083,0,42.05,0L45,0.05c2.467,0,4.933,0.034,7.4,0.1c7.833,0.133,14.2,0.367,19.1,0.7c0.3,0.033,0.833,0.1,1.6,0.2c0.733,0.1,1.417,0.233,2.05,0.4c1.833,0.566,3.434,1.566,4.8,3c1.066,1.066,1.933,2.767,2.6,5.1c0.367,1.2,0.617,2.284,0.75,3.25l0.4,4.25C84,20.45,84.15,23.567,84.15,26.4z M33.3,41.4L56,29.6L33.3,17.75V41.4z"></path><polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="33.3,41.4 33.3,17.75 56,29.6"></polygon></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<video autoplay loop poster="images/yt-thumb.jpg" id="bgvid" muted>
|
||||||
|
<source src="media/ff_clips.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<iframe id="yt-video-embed" src="https://www.youtube.com/embed/-0-6wdDyGLI?list=PL5KX7r5FIS6ob8gqYTJzBUJV7c_j0dCm6&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
|
||||||
|
<script>
|
||||||
|
var tag = document.createElement('script');
|
||||||
|
|
||||||
|
tag.src = "https://www.youtube.com/iframe_api";
|
||||||
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||||
|
|
||||||
|
var player;
|
||||||
|
function onYouTubeIframeAPIReady() {
|
||||||
|
player = new YT.Player('yt-video-embed');
|
||||||
|
}
|
||||||
|
|
||||||
|
function startMainVideo() {
|
||||||
|
player.playVideo();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue