From 0fa721081083bd0102360f5f6d6da3a162f350c7 Mon Sep 17 00:00:00 2001 From: Exodus4D Date: Wed, 13 Jan 2016 19:39:42 +0100 Subject: [PATCH] added "lazy loading" for youtube video improved "PageSpeed Insights" Ranking --- js/app/landingpage.js | 32 +++++++++++++++ public/css/pathfinder.css | 2 +- public/js/v1.0.0RC1/app/landingpage.js | 4 +- public/js/v1.0.0RC1/app/landingpage.js.map | 2 +- public/templates/view/landingpage.html | 45 +++++++++++----------- sass/layout/_all.scss | 3 +- sass/layout/_youtube.scss | 25 ++++++++++++ 7 files changed, 86 insertions(+), 27 deletions(-) create mode 100644 sass/layout/_youtube.scss diff --git a/js/app/landingpage.js b/js/app/landingpage.js index ee1d5bc3..e6ccf460 100644 --- a/js/app/landingpage.js +++ b/js/app/landingpage.js @@ -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($('
', {'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 = $(' +
@@ -543,7 +545,6 @@ -
@@ -755,45 +756,45 @@

Frontend

    -
  • Bootstrap as a HTML, CSS framework
    • -
  • SASS and Compass as a CSS preprocessor
    • -
  • RequireJs as an AMD loader and builder for Javascript
    • -
  • jQuery as the main Javascript library
    • +
  • "Bootstrap" as a HTML, CSS framework
    • +
  • "SASS" and "Compass" as a CSS preprocessor
    • +
  • "RequireJs" as an AMD loader and builder for Javascript
    • +
  • "jQuery" as the main Javascript library
    • ≈ 50 self written jQuery plugins
    • ≈ 40 open source plugins
    • -
  • Node.js and Gulp as js task runner and CI-build environment
    • +
  • "Node.js" and "Gulp" as js task runner and CI-build environment
  • Code quality and automated testing
  • You should know about some HTML5 APIs

Backend

    -
  • Fat-Free Framework as a lightweight PHP framework and ORM mapper
    • -
  • MySQL, SQLite or PostgreSQL as databases (configurable)
    • -
  • Memcache, APC or XCache as a 2nd level cache engine (configurable)
    • +
  • "Fat-Free Framework" as a lightweight PHP framework and ORM mapper
    • +
  • "MySQL as databases (configurable)
    • +
  • "Memcache, APC or XCache as a 2nd level cache engine (configurable)
  • Code quality and automated testing
  • You should know about relational databases, MVC pattern and ORM strategies
    • diff --git a/sass/layout/_all.scss b/sass/layout/_all.scss index 5fe751f4..80f9c8e5 100644 --- a/sass/layout/_all.scss +++ b/sass/layout/_all.scss @@ -9,4 +9,5 @@ @import "_log"; @import "_animation"; @import "_ribbon"; -@import "_loading-bar"; \ No newline at end of file +@import "_loading-bar"; +@import "_youtube"; \ No newline at end of file diff --git a/sass/layout/_youtube.scss b/sass/layout/_youtube.scss new file mode 100644 index 00000000..4bb79267 --- /dev/null +++ b/sass/layout/_youtube.scss @@ -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); +} \ No newline at end of file