Fullscreen Youtube Background Video

Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Fullscreen Youtube Background Video

Post by eddy »

Remark: It's possible to do same thing with mpeg4 or webm file but i've no video link for this demo.

Image

Code: Select all

; ******************************
; Plugins
; ******************************

Macro InitPlugins(IsInitialized=#True) ; internal functions
  CompilerIf IsInitialized
    !"undefined"==typeof window.SpiderPlugins&&(window.SpiderPlugins={extensions:{},paths:{},names:[]})
  CompilerElse 
    !window.SpiderPlugins={extensions:{},paths:{},names:[]};
  CompilerEndIf   
EndMacro

Procedure DeclareHeaderCSS(css.s)
  !$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', v_css) );
EndProcedure

Procedure DeclarePlugin(Plugin.s, Path.s, IsUsed=#True)
  InitPlugins()
  !,window.SpiderPlugins.paths[v_plugin]=v_path
  !,v_isused && window.SpiderPlugins.names.push(v_plugin);
EndProcedure

Procedure UsePlugins(*FunctionUsingPlugins, EnforceDefine=#False)  
  !var cfg=$.extend({ enforceDefine: v_enforcedefine, paths: window.SpiderPlugins.paths }, window.SpiderPlugins.extensions);
  !requirejs.config(cfg);
  !require(window.SpiderPlugins.names, p_functionusingplugins);  
  InitPlugins(#False)
EndProcedure

; ******************************
; JSON Shorthand
; ******************************
#MemberEmpty=""
Macro OpenObjectJSON(member=#MemberEmpty)  
    CompilerIf #MemberEmpty=member
      !   {
    CompilerElse 
      !   member: {
    CompilerEndIf    
  EndMacro
  
  Macro CloseObjectJSON()
  !   },
EndMacro

Macro OpenArrayJSON(member=#MemberEmpty)  
    CompilerIf #MemberEmpty=member
      !   {
    CompilerElse 
      !   member: [
    CompilerEndIf    
  EndMacro
  
  Macro CloseArrayJSON()
  !   ],
EndMacro

Macro AddMemberJSON(member,value)
  CompilerIf #True 
    !   member:value,
  CompilerEndIf    
EndMacro

Macro AddValueJSON(value)
  CompilerIf #True 
    !   value,
  CompilerEndIf    
EndMacro

CompilerIf #PB_Compiler_IsMainFile  
  ; *************************************
  ; EXAMPLE - Background Youtube video
  ; *************************************
  
  Procedure CreateBackgroundVideo(YoutubeVideoId.s, IsLooping=#True, IsMute=#True)
    !$('<div class="container" />').appendTo('body').tubular({videoId: v_youtubevideoid, repeat:v_islooping, mute:v_ismute});
    !setTimeout(function(){ 
    ;!   $('#tubular-container iframe').attr('src',$('#tubular-container iframe').attr('src')+'&iv_load_policy=3'); // remove annotation(s)
    !   $('#tubular-container,.container').addClass('fadeIn')
    !}, 200);
  EndProcedure
  
  Procedure CreateWebsite(JqueryTubular,Organic,Absurd)    
    ;your video background
    CreateBackgroundVideo("X-dMOvEOQiM"); // 9hyHnSKE8os
    
    ;preprocessor to generate CSS
    Protected dark_color.s = "rgba(0,0,0,.3)";
    !var absurd = Absurd();    
    !var css = absurd.add({
    OpenObjectJSON("a:link, a:visited") : AddMemberJSON("color","orange") : CloseObjectJSON()
    OpenObjectJSON("a:hover") : AddMemberJSON("color","yellow") : AddMemberJSON("transition","1s color") : CloseObjectJSON()
    OpenObjectJSON("body")
      AddMemberJSON("bg","white")
      AddMemberJSON("fz","20px")
      AddMemberJSON("lh","24px")
      AddMemberJSON("fontFamily","Helvetica, Arial, sans-serif")
      AddMemberJSON("color","white")
      OpenObjectJSON("#tubular-container,.container")
        AddMemberJSON("opacity",0)
        OpenObjectJSON("&.fadeIn")
          AddMemberJSON("opacity",1)
          AddMemberJSON("transition","1s opacity") 
          AddMemberJSON("transitionDelay","1s") 
        CloseObjectJSON()
      CloseObjectJSON() 
      OpenObjectJSON(".container")
        AddMemberJSON("paddingTop","30px")
        AddMemberJSON("marginLeft","auto")
        AddMemberJSON("marginRight","auto")
        AddMemberJSON("width","800px")
        OpenObjectJSON("section")
          AddMemberJSON("marginTop","15px")
          AddMemberJSON("marginBottom","15px")
          AddMemberJSON("display","flex")
          AddMemberJSON("flexFlow","row nowrap")
          OpenObjectJSON("aside")
            AddMemberJSON("flex","0 1 200px")
            AddMemberJSON("marginRight","15px")
            OpenObjectJSON("nav")
              AddMemberJSON("display","flex")
              AddMemberJSON("flexFlow","column nowrap")
              AddMemberJSON("justifyContent","space-between")
              OpenObjectJSON("a")
                AddMemberJSON("color","white")
                AddMemberJSON("marginBottom","5px")
                AddMemberJSON("textDecoration","none")
                AddMemberJSON("borderLeft","0px solid black")
                AddMemberJSON("transition","0.2s border-left")
                OpenObjectJSON("&:hover")
                  AddMemberJSON("borderLeft","10px solid red")
                  AddMemberJSON("transition","0.2s border-left")
                CloseObjectJSON()
              CloseObjectJSON()
            CloseObjectJSON()
          CloseObjectJSON()
          OpenObjectJSON("article")
            AddMemberJSON("flex","1 0 auto")
          CloseObjectJSON()
        CloseObjectJSON()
      CloseObjectJSON()
      OpenObjectJSON(".blackbox")
        AddMemberJSON("bg", v_dark_color)
        AddMemberJSON("pad", "10px")
      CloseObjectJSON()
      OpenObjectJSON(".shadow")
        AddMemberJSON("textShadow","5px 5px 6px #000000")
      CloseObjectJSON()
    CloseObjectJSON()
    !}).compile();
    !$('<style />').html(css).appendTo('head');
    
    ;preprocessor to generate HTML
    !var html = absurd.morph('html').add({
    OpenObjectJSON("header.blackbox.shadow")
      AddMemberJSON("h1","Fullscreen Background Video")
    CloseObjectJSON()
    OpenObjectJSON("section")
      OpenObjectJSON("aside")
        OpenArrayJSON("nav")
          OpenObjectJSON() : AddMemberJSON("a.blackbox[href='#Home']","<i class='fa fa-home'></i> Home") : CloseObjectJSON()
          OpenObjectJSON() : AddMemberJSON("a.blackbox[href='#Projects']","<i class='fa fa-git'></i> Projects") : CloseObjectJSON()
          OpenObjectJSON() : AddMemberJSON("a.blackbox[href='#Downloads']","<i class='fa fa-download'></i> Downloads") : CloseObjectJSON()
          OpenObjectJSON() : AddMemberJSON("a.blackbox[href='#About']","<i class='fa fa-info-circle'></i> About") : CloseObjectJSON()
        CloseArrayJSON()
      CloseObjectJSON()
      OpenObjectJSON("article.blackbox")
        AddMemberJSON("h3","Technical Details")
        OpenArrayJSON("ul")
          OpenObjectJSON() : AddMemberJSON("li","Video Source: <a href='https://youtu.be/X-dMOvEOQiM'>https://youtu.be/X-dMOvEOQiM</a>") : CloseObjectJSON()
          OpenObjectJSON() : AddMemberJSON("li","Plugin: <a href='http://absurdjs.com/'>http://absurdjs.com/</a>") : CloseObjectJSON()
          OpenObjectJSON() 
            OpenArrayJSON("li") 
              AddValueJSON("Plugin: ") 
              OpenObjectJSON() : AddMemberJSON("a[href='http://www.seanmccambridge.com/tubular/' ]","http://www.seanmccambridge.com/tubular/") : CloseObjectJSON()
              AddValueJSON(" <i class='fa fa-thumbs-o-up'></i>")
            CloseArrayJSON()
          CloseObjectJSON()
        CloseArrayJSON()
      CloseObjectJSON()
    CloseObjectJSON()
    OpenObjectJSON("footer.blackbox.shadow")
      AddMemberJSON("p","Demo powered by SpiderBasic")
    CloseObjectJSON()
    !}).compile();
    !$('.container').append($(html));    
  EndProcedure
  
  DeclareHeaderCSS("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css")         ;Awesome Image-Font Plugin
  DeclarePlugin("JqueryTubular","//rawgit.com/jarc100/jquery-tubular/master/js/jquery.tubular.1.0")      ;Tubular Plugin
  DeclarePlugin("Organic","//cdnjs.cloudflare.com/ajax/libs/absurd/0.3.4/absurd.organic")                ;Absurd Extension  
  DeclarePlugin("Absurd","//cdnjs.cloudflare.com/ajax/libs/absurd/0.3.4/absurd")                         ;Absurd Plugin   
  UsePlugins(@CreateWebsite())
CompilerEndIf
Comtois
Posts: 40
Joined: Mon Feb 24, 2014 11:07 pm

Re: Fullscreen Youtube Background Video

Post by Comtois »

Thank you for all your examples, i can learn from them.
Hi-Toro
Posts: 6
Joined: Mon May 19, 2014 1:09 pm

Re: Fullscreen Youtube Background Video

Post by Hi-Toro »

Really cool demo!
Post Reply