{"id":15834,"date":"2019-02-14T07:42:56","date_gmt":"2019-02-14T07:42:56","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=15834"},"modified":"2019-02-14T07:53:48","modified_gmt":"2019-02-14T07:53:48","slug":"full-page-background-video-styles","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/full-page-background-video-styles\/","title":{"rendered":"FULL PAGE BACKGROUND VIDEO STYLES"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><u><em>Author:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul><li>Chris Coyier<\/li><li>mediatemple.net<\/li><li>24.05.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<\/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;I bet you\u2019ve seen it. A video background that takes up the entire browser window. There is text on top of it (hence, \u201cbackground\u201d), which is an interesting effect that you don\u2019t see every day. The biggest reason you don\u2019t, probably, is that you can\u2019t set a movie file as the\u00a0<code>background-image<\/code>\u00a0in CSS. You\u2019ll have to do some layout trickery to get it done.&#8221;<\/p>\n\n\n<a href=\"http:\/\/mediatemple.net\/blog\/tips\/full-page-background-video-styles\/\" 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:\/\/codepen.io\/chriscoyier\/full\/BRvdgK\/\" 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: Chris Coyier mediatemple.net 24.05.2017 Made with: HTML CSS JavaScript About the tutorial: &#8220;I bet you\u2019ve seen it. A video background that takes up the entire browser window. There is text on top of it (hence, \u201cbackground\u201d), which is an interesting effect that you don\u2019t see every day. The biggest reason you don\u2019t, probably, is that you can\u2019t set a movie file as the\u00a0background-image\u00a0in CSS. You\u2019ll have to do some layout trickery to get it done.&#8221;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":15835,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4469],"tags":[4571,4477,4478],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/15834"}],"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=15834"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/15834\/revisions"}],"predecessor-version":[{"id":15836,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/15834\/revisions\/15836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/15835"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=15834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=15834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=15834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}