{"id":1168,"date":"2019-08-24T17:21:55","date_gmt":"2019-08-24T10:21:55","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1168"},"modified":"2019-08-24T17:21:55","modified_gmt":"2019-08-24T10:21:55","slug":"sticky-floating-video-jquery","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/","title":{"rendered":"Sticky Floating Video (jQuery)"},"content":{"rendered":"<p>Salah satu komponen penting yang bisa diterapkan dalam membuat website agar lebih user friendly adalah dengan membuat fitur sticky. Fitur sticky sendiri bervariasi mulai dari yang umum yaitu pembuatan sticky navigasi, hingga yang sedang tren saat ini adalah membuat sticky video.<br \/>\n<!--more--><br \/>\nPada tulisan ini akan dibahas seputar sticky video, yang akan dilengkapi dengan skrip kode HTML, CSS dan serta JavaScript dipadukan dengan jQuery sebagai aktivasi.<\/p>\n<p>Fitur sticky video sudah dapat dijumpai pada situs jejaring sosial <a href=\"https:\/\/www.facebook.com\/yellowwebid\/\" rel=\"noopener noreferrer\" target=\"_blank\">Facebook<\/a> dan tidak mau ketinggalan situs <a href=\"https:\/\/www.youtube.com\/channel\/UCxxIoqFI9EcnoDK_30i5gNg\" rel=\"noopener noreferrer\" target=\"_blank\">YouTube<\/a> ikut mengadopsi fitur ini. <\/p>\n<p>Dengan menggunakan fitur ini, pengunjung web secara bersamaan dapat melihat isi web dan tanpa ketinggalan streaming video yang sedang dimainkan. Video akan menyusut(mengecil) pada saat halaman digulir (scroll) kebawah, sehingga baik isi konten web dan video secara bersamaan dapat dinikmati.<\/p>\n<p>Berikut ini ada beberapa hal yang harus dipersiapkan untuk membuat efek floating video, diantaranya adalah sebagai berikut:<br \/>\n1) HTML (index.html)<br \/>\n2) CSS (style.css, normalize.css)<br \/>\n3) JavaScript (Library jQuery)<\/p>\n<p>File index.html<\/p>\n<pre class=\"lang:default decode:true \" >\t&lt;div class=\"content-main-box\"&gt;\r\n\t\t&lt;div id=\"videobox\"&gt;\r\n\t\t\t&lt;!-- &lt;video width=\"400\" controls=\"\"&gt;\r\n\t\t\t\t&lt;source src=\"assets\/rossi.mp4\" type=\"video\/mp4\"&gt;\r\n\t\t\t\tYour browser doesn't support\r\n\t\t\t&lt;\/video&gt; --&gt;\r\n\t\t\t\r\n\t\t\t&lt;iframe width=\"400\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/vr0qNXmkUJ8\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen&gt;&lt;\/iframe&gt;\r\n\r\n\t\t&lt;\/div&gt;\r\n\r\n\t\t&lt;div class=\"content-box\"&gt;\r\n\t\t\t&lt;h1&gt;Efek&lt;span&gt;\"sticky\"&lt;\/span&gt;Floating &lt;span&gt;video&lt;\/span&gt; saat &lt;span&gt;scroll&lt;\/span&gt;&lt;\/h1&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<p>File style.css<\/p>\n<pre class=\"lang:default decode:true \" >*{\r\n\tpadding: 0px;\r\n\tmargin: 0px;\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n.content-main-box{\r\n\twidth: 90%;\r\n\theight: auto;\r\n\tmargin: auto;\r\n\tmax-width: 1200px;\r\n}\r\n\r\n#videobox{\r\n\twidth: 50%;\r\n\theight: auto;\r\n\tmargin: auto;\r\n\tborder: 10px solid #000;\r\n\ttransition: 0.5s;\r\n}\r\n\r\niframe, video{\r\n\twidth: 100%;\r\n\tvertical-align: bottom;\r\n}\r\n\r\n.content-box{\r\n\twidth: 100%;\r\n\theight: auto;\r\n\tmargin: auto;\r\n\tdisplay: block;\r\n\tposition: static;\r\n\toverflow: hidden;\r\n}\r\n\r\n.content-box h1{\r\n\tfont-family: arial;\r\n\tfont-size: 30px;\r\n\ttext-align: center;\r\n\tcolor: #f7403c;\r\n\tpadding-top: 20px;\r\n\ttext-transform: uppercase;\r\n}\r\n\r\n.content-box h1 span{\r\n\tcolor: #fe9b1a;\r\n}\r\n\r\n.content-box p{\r\n\tfont-family: arial;\r\n\tfont-size: 18px;\r\n\ttext-align: justify;\r\n\tcolor: #333333;\r\n\tline-height: 26px;\r\n\tpadding-top: 20px;\r\n}\r\n\r\n#videobox.in{\r\n\tanimation: ac 1s;\r\n}\r\n\r\n#videobox.out{\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\twidth: 300px;\r\n\tz-index: 999;\r\n\tanimation: an 0.5s;\r\n}\r\n<\/pre>\n<p>Skrip JavaScript, disini disisipkan pada badan web atau tag HTML BODY<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!-- JavaScript --&gt;\r\n\t&lt;script type=\"text\/javascript\" src=\"js\/jquery-3.4.1.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script type=\"text\/javascript\"&gt;\r\n\t\tvar ha=($('#videobox').offset().top + $('#videobox').height());\r\n\r\n\t\t$(window).scroll(function(){\r\n\t\t\tif($(window).scrollTop() &gt; ha + 500) {\r\n\t\t\t\t$('#videobox').css('bottom','0');\r\n\t\t\t} else if($(window).scrollTop() &lt; ha + 200) {\r\n\t\t\t\t$('#videobox').removeClass('out').addClass('in');\r\n\t\t\t} else {\r\n\t\t\t\t$('#videobox').removeClass('in').addClass('out');\r\n\t\t\t\t$('#videobox').css('bottom','-500px')\r\n\t\t\t};\r\n\t\t});\r\n\t&lt;\/script&gt;<\/pre>\n<p>Skrip secara keseluruhan sebagai berikut:<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n\t&lt;title&gt;Sticky Floating Video | YELLOWWEB.ID&lt;\/title&gt;\r\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style\/normalize.css\"&gt;\r\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style\/style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n\t&lt;div class=\"content-main-box\"&gt;\r\n\t\t&lt;div id=\"videobox\"&gt;\r\n\t\t\t&lt;!-- &lt;video width=\"400\" controls=\"\"&gt;\r\n\t\t\t\t&lt;source src=\"assets\/rossi.mp4\" type=\"video\/mp4\"&gt;\r\n\t\t\t\tYour browser doesn't support\r\n\t\t\t&lt;\/video&gt; --&gt;\r\n\t\t\t\r\n\t\t\t&lt;iframe width=\"400\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/vr0qNXmkUJ8\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen&gt;&lt;\/iframe&gt;\r\n\r\n\t\t&lt;\/div&gt;\r\n\r\n\t\t&lt;div class=\"content-box\"&gt;\r\n\t\t\t&lt;h1&gt;Efek&lt;span&gt;\"sticky\"&lt;\/span&gt;Floating &lt;span&gt;video&lt;\/span&gt; saat &lt;span&gt;scroll&lt;\/span&gt;&lt;\/h1&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.&lt;\/p&gt;\r\n\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n\t\r\n\t&lt;!-- JavaScript --&gt;\r\n\t&lt;script type=\"text\/javascript\" src=\"js\/jquery-3.4.1.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script type=\"text\/javascript\"&gt;\r\n\t\tvar ha=($('#videobox').offset().top + $('#videobox').height());\r\n\r\n\t\t$(window).scroll(function(){\r\n\t\t\tif($(window).scrollTop() &gt; ha + 500) {\r\n\t\t\t\t$('#videobox').css('bottom','0');\r\n\t\t\t} else if($(window).scrollTop() &lt; ha + 200) {\r\n\t\t\t\t$('#videobox').removeClass('out').addClass('in');\r\n\t\t\t} else {\r\n\t\t\t\t$('#videobox').removeClass('in').addClass('out');\r\n\t\t\t\t$('#videobox').css('bottom','-500px')\r\n\t\t\t};\r\n\t\t});\r\n\t&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Pada dasarnya tujuan penulisan skrip ini adalah agar teman-teman memahami apa itu konsep float CSS, yang pada dasarnya nanti akan dijadikan point paling penting dalam pembuatan efek sticky video ini.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/Ly95xkrf\/5\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe><\/p>\n<p>Catatan:<br \/>\nFile pendukung, dapat diambil disini:<br \/>\n1. <a href=\"https:\/\/necolas.github.io\/normalize.css\/8.0.1\/normalize.css\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/necolas.github.io\/normalize.css\/8.0.1\/normalize.css<\/a><br \/>\n2. <a href=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Salah satu komponen penting yang bisa diterapkan dalam membuat website agar lebih user friendly adalah dengan membuat fitur sticky. Fitur sticky sendiri bervariasi mulai dari yang umum yaitu pembuatan sticky navigasi, hingga yang sedang tren saat ini adalah membuat sticky video.<\/p>\n","protected":false},"author":1,"featured_media":1171,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,116],"tags":[8,501,502,18,71,70],"class_list":["post-1168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-jquery","tag-css","tag-embeded","tag-float","tag-jquery","tag-video","tag-youtube"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Sticky Floating Video (jQuery) - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Floating Video (jQuery) - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Salah satu komponen penting yang bisa diterapkan dalam membuat website agar lebih user friendly adalah dengan membuat fitur sticky. Fitur sticky sendiri bervariasi mulai dari yang umum yaitu pembuatan sticky navigasi, hingga yang sedang tren saat ini adalah membuat sticky video.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-24T10:21:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/08\/float-video.jpg?fit=600%2C280&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Sticky Floating Video (jQuery)\",\"datePublished\":\"2019-08-24T10:21:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/\"},\"wordCount\":235,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/float-video.jpg\",\"keywords\":[\"css\",\"embeded\",\"float\",\"jquery\",\"video\",\"youtube\"],\"articleSection\":[\"CSS\",\"jQuery\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/\",\"name\":\"Sticky Floating Video (jQuery) - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/float-video.jpg\",\"datePublished\":\"2019-08-24T10:21:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/float-video.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/float-video.jpg\",\"width\":600,\"height\":280,\"caption\":\"float-video.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sticky-floating-video-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sticky Floating Video (jQuery)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sticky Floating Video (jQuery) - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/","og_locale":"en_GB","og_type":"article","og_title":"Sticky Floating Video (jQuery) - YELLOWWEB.ID","og_description":"Salah satu komponen penting yang bisa diterapkan dalam membuat website agar lebih user friendly adalah dengan membuat fitur sticky. Fitur sticky sendiri bervariasi mulai dari yang umum yaitu pembuatan sticky navigasi, hingga yang sedang tren saat ini adalah membuat sticky video.","og_url":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2019-08-24T10:21:55+00:00","og_image":[{"width":600,"height":280,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/08\/float-video.jpg?fit=600%2C280&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Sticky Floating Video (jQuery)","datePublished":"2019-08-24T10:21:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/"},"wordCount":235,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/08\/float-video.jpg","keywords":["css","embeded","float","jquery","video","youtube"],"articleSection":["CSS","jQuery"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/","url":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/","name":"Sticky Floating Video (jQuery) - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/08\/float-video.jpg","datePublished":"2019-08-24T10:21:55+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/08\/float-video.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/08\/float-video.jpg","width":600,"height":280,"caption":"float-video.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/sticky-floating-video-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Sticky Floating Video (jQuery)"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=1168"}],"version-history":[{"count":2,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1168\/revisions"}],"predecessor-version":[{"id":1170,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1168\/revisions\/1170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1171"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}