added "lazy loading" for youtube video
improved "PageSpeed Insights" Ranking
This commit is contained in:
Exodus4D
@@ -402,6 +402,35 @@ define([
|
||||
});
|
||||
};
|
||||
|
||||
var initYoutube = function(){
|
||||
|
||||
$(".youtube").each(function() {
|
||||
// Based on the YouTube ID, we can easily find the thumbnail image
|
||||
$(this).css('background-image', 'url(https://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
|
||||
|
||||
// Overlay the Play icon to make it look like a video player
|
||||
$(this).append($('<div/>', {'class': 'play'}));
|
||||
|
||||
$(document).delegate('#'+this.id, 'click', function() {
|
||||
// Create an iFrame with autoplay set to true
|
||||
var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
|
||||
if ($(this).data('params')) iframe_url+='&'+$(this).data('params');
|
||||
|
||||
// The height and width of the iFrame should be the same as parent
|
||||
var iframe = $('<iframe/>', {
|
||||
frameborder: '0',
|
||||
src: iframe_url,
|
||||
width: $(this).width(),
|
||||
height: $(this).height(),
|
||||
class: 'pricing-big'
|
||||
});
|
||||
|
||||
// Replace the YouTube thumbnail with YouTube HTML5 Player
|
||||
$(this).replaceWith(iframe);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* init scrollspy for navigation bar
|
||||
@@ -511,6 +540,9 @@ define([
|
||||
// init gallery
|
||||
initGallery();
|
||||
|
||||
// init youtube videos
|
||||
initYoutube();
|
||||
|
||||
// show logo -> hide animation in IGB
|
||||
if( !CCP.isInGameBrowser() ){
|
||||
$('#' + config.logoContainerId).drawLogo(function(){
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -18,9 +18,7 @@
|
||||
</button>
|
||||
|
||||
<p class="navbar-text">
|
||||
<a target="_blank" href="{{ @PATHFINDER.REPO }}">
|
||||
<span class="badge txt-color txt-color-grayLight">{{ @PATHFINDER.VERSION }}</span>
|
||||
</a>
|
||||
<span class="badge txt-color txt-color-grayLight">{{ @PATHFINDER.VERSION }}</span>
|
||||
</p>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right" role="tablist">
|
||||
@@ -514,7 +512,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row text-center">
|
||||
<div class="row text-center hidden-xs">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<p class="lead">
|
||||
This video, will guide you through the basic functions in <em>PATHFINDER</em>.
|
||||
@@ -522,8 +520,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row text-center hidden-sm">
|
||||
<iframe width="853" height="480" src="https://www.youtube.com/embed/Cc3jcN_jx04?modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
|
||||
<div class="row text-center hidden-xs">
|
||||
<div class="pricing-big youtube"
|
||||
id="Cc3jcN_jx04"
|
||||
data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720"
|
||||
style="width: 640px; height: 360px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -543,7 +545,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row text-center">
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 pf-landing-pricing-panel">
|
||||
<div class="panel panel-default pricing-big pf-animate pf-animate-on-visible">
|
||||
@@ -755,45 +756,45 @@
|
||||
</p>
|
||||
<h3>Frontend</h3>
|
||||
<ul class="fa-ul pf-landing-list">
|
||||
<li><i></i><em><a target="_blank" href="http://getbootstrap.com/">Bootstrap</a></em> as a HTML, CSS framework</li>
|
||||
<li><i></i><em><a target="_blank" href="http://sass-lang.com/">SASS</a></em> and <em><a target="_blank" href="http://compass-style.org/">Compass</a></em> as a CSS preprocessor</li>
|
||||
<li><i></i><em><a target="_blank" href="http://requirejs.org/">RequireJs</a></em> as an AMD loader and builder for Javascript</li>
|
||||
<li><i></i><em><a target="_blank" href="https://jquery.com/">jQuery</a></em> as the main Javascript library</li>
|
||||
<li><i></i>"<em>Bootstrap</em>" as a HTML, CSS framework</li>
|
||||
<li><i></i>"<em>SASS</em>" and "<em>Compass</em>" as a CSS preprocessor</li>
|
||||
<li><i></i>"<em>RequireJs</em>" as an AMD loader and builder for Javascript</li>
|
||||
<li><i></i>"<em>jQuery</em>" as the main Javascript library</li>
|
||||
<li>
|
||||
<ul class="fa-ul">
|
||||
<li><i></i>≈ 50 self written jQuery plugins</li>
|
||||
<li><i></i>≈ 40 open source plugins</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><i></i><em><a target="_blank" href="https://nodejs.org/">Node.js</a></em> and <em><a target="_blank" href="http://gulpjs.com/">Gulp</a></em> as js task runner and CI-build environment</li>
|
||||
<li><i></i>"<em>Node.js</em>" and "<em>Gulp</em>" as js task runner and CI-build environment</li>
|
||||
|
||||
<li><i></i>Code quality and automated testing</li>
|
||||
<li>
|
||||
<ul class="fa-ul">
|
||||
<li><i></i><em><a target="_blank" href="http://jshint.com/">JSHint</a></em></li>
|
||||
<li><i></i><em><a target="_blank" href="http://jasmine.github.io/">Jasmine</a></em></li>
|
||||
<li><i></i>"<em>JSHint</em>"</li>
|
||||
<li><i></i>"<em>Jasmine</em>"</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><i></i>You should know about some HTML5 APIs</li>
|
||||
<li>
|
||||
<ul class="fa-ul">
|
||||
<li><i></i><em><a target="_blank" href="http://www.w3.org/TR/webstorage/">Local Storage</a></em></li>
|
||||
<li><i></i><em><a target="_blank" href="http://www.w3.org/TR/page-visibility/">Page Visibility</a></em></li>
|
||||
<li><i></i><em><a target="_blank" href="http://www.w3.org/TR/notifications/">Web Notifications</a></em></li>
|
||||
<li><i></i><em><a target="_blank" href="http://www.w3.org/TR/fullscreen/">Fullscreen</a></em></li>
|
||||
<li><i></i>"<em>Local Storage</em>"</li>
|
||||
<li><i></i>"<em>Page Visibility</em>"</li>
|
||||
<li><i></i>"<em>Web Notifications</em>"</li>
|
||||
<li><i></i>"<em>Fullscreen</em>"</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Backend</h3>
|
||||
<ul class="fa-ul pf-landing-list">
|
||||
<li><i></i><em><a target="_blank" href="http://fatfreeframework.com/">Fat-Free Framework</a></em> as a lightweight PHP framework and ORM mapper</li>
|
||||
<li><i></i><em><a target="_blank" href="https://www.mysql.de/">MySQL</a>, <a target="_blank" href="https://www.sqlite.org/">SQLite</a> or <a target="_blank" href="http://www.postgresql.org/">PostgreSQL</a></em> as databases (configurable)</li>
|
||||
<li><i></i><em><a target="_blank" href="http://memcached.org/">Memcache</a>, <a target="_blank" href="http://php.net/manual/de/book.apc.php">APC</a> or <a target="_blank" href="http://xcache.lighttpd.net/">XCache </a></em> as a 2nd level cache engine (configurable)</li>
|
||||
<li><i></i>"<em>Fat-Free Framework</em>" as a lightweight PHP framework and ORM mapper</li>
|
||||
<li><i></i>"<em>MySQL</em> as databases (configurable)</li>
|
||||
<li><i></i>"<em>Memcache, APC or XCache</em> as a 2nd level cache engine (configurable)</li>
|
||||
<li><i></i>Code quality and automated testing</li>
|
||||
<li>
|
||||
<ul class="fa-ul">
|
||||
<li><i></i><em><a target="_blank" href="https://phpunit.de/">PHPUnit</a></em></li>
|
||||
<li><i></i>"<em>PHPUnit</em>"</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><i></i>You should know about relational databases, MVC pattern and ORM strategies</li>
|
||||
|
||||
@@ -9,4 +9,5 @@
|
||||
@import "_log";
|
||||
@import "_animation";
|
||||
@import "_ribbon";
|
||||
@import "_loading-bar";
|
||||
@import "_loading-bar";
|
||||
@import "_youtube";
|
||||
25
sass/layout/_youtube.scss
Normal file
25
sass/layout/_youtube.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.youtube {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
transition: all 200ms ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.youtube .play {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center;
|
||||
background-size: 64px 64px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: .8;
|
||||
filter: alpha(opacity=80);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.youtube .play:hover {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
Reference in New Issue
Block a user