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

by eddy Sat May 09, 2015 3:44 am

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

by Comtois Sun May 10, 2015 5:50 pm

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

by Hi-Toro Mon May 11, 2015 4:58 pm

Really cool demo!
Return to Showcase

Who is online

Users browsing this forum: No registered users and 3 guests