{"id":16017,"date":"2019-02-17T11:59:43","date_gmt":"2019-02-17T11:59:43","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=16017"},"modified":"2019-02-17T12:09:16","modified_gmt":"2019-02-17T12:09:16","slug":"how-to-create-a-sticky-floating-video-on-page-scroll","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/how-to-create-a-sticky-floating-video-on-page-scroll\/","title":{"rendered":"HOW TO CREATE A &#8220;STICKY&#8221; FLOATING VIDEO ON PAGE SCROLL"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><u><em>Author:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul><li>Louie Rootfield<\/li><li>webdesign.tutsplus.com<\/li><li>07.03.2017<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>Made with:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul><li>HTML<\/li><li>CSS<\/li><li>JavaScript (jQuery.js)<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>About the tutorial:<\/em><\/u><\/strong><\/h4>\n\n\n\n<p>&#8220;If you have found yourself browsing media websites recently\u2013video streaming services, news websites, Facebook and so on\u2013you might have noticed a trend regarding their video players. If we scroll down a page where a video is present, it will float and shrink the player, sticking it to the side of the viewport instead of losing it from view. This allows the users to keep an eye on the video, whilst looking through the other content at the same time. In this tutorial I\u2019m going to show you how to recreate the same experience\u2013so without further ado, let\u2019s get started!&#8221;<\/p>\n\n\n<a href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/how-to-create-a-sticky-floating-video-on-page-scroll--cms-28342\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Tutorial<\/span><\/a>\n\n\n<a href=\"https:\/\/tutsplus.github.io\/how-to-create-a-sticky-floating-video-on-page-scroll\/\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Louie Rootfield webdesign.tutsplus.com 07.03.2017 Made with: HTML CSS JavaScript (jQuery.js) About the tutorial: &#8220;If you have found yourself browsing media websites recently\u2013video streaming services, news websites, Facebook and so on\u2013you might have noticed a trend regarding their video players. If we scroll down a page where a video is present, it will float and shrink the player, sticking it to the side of the viewport instead of losing it from view. This allows the users to keep an eye on the video, whilst looking through the other content at the same time. In this tutorial I\u2019m going to show you how to recreate the same experience\u2013so without further ado, let\u2019s get started!&#8221;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":16018,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4469],"tags":[4607,4477,4478],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/16017"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=16017"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/16017\/revisions"}],"predecessor-version":[{"id":16019,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/16017\/revisions\/16019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/16018"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=16017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=16017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=16017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}