{"id":252,"date":"2017-01-31T23:44:00","date_gmt":"2017-01-31T23:44:00","guid":{"rendered":"http:\/\/tommustester.wpengine.com\/?page_id=252"},"modified":"2017-01-31T23:44:00","modified_gmt":"2017-01-31T23:44:00","slug":"video-backgrounds","status":"publish","type":"page","link":"https:\/\/radialcircle.com\/index.php\/video-backgrounds\/","title":{"rendered":"Elements &#8211; Video Backgrounds"},"content":{"rendered":"<body><p>[vc_row full_width=\u201dstretch_row\u201d][vc_column]\n\t\t\t<section class=\"imagebg image--light cover cover-blocks bg--secondary \" >\n\t\t\t\t<div class=\"background-image-holder\"><img loading=\"lazy\" decoding=\"async\" width=\"3600\" height=\"1762\" src=\"https:\/\/i0.wp.com\/radialcircle.com\/wp-content\/uploads\/2017\/01\/promo-1.jpg?fit=3600%2C1762&amp;ssl=1\" class=\"attachment-full size-full\" alt=\"\" \/><\/div>\n\t\t\t\t<div class=\"container\">\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<div class=\"col-sm-6 col-md-5\">\n\t\t\t\t\t\t\t<div>[vc_column_text]<\/p>\n<h1>Video Backgrounds<\/h1>\n<p class=\"lead\">These modular elements can be readily used and customized across pages and in different blocks.<\/p>\n<hr class=\"short\">\n<p>Explore all of Stack\u2019s modular elements<br>\nat the\u00a0<a href=\"\/elements\/\">Element Index Page \u2192<\/a>[\/vc_column_text]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div><!--end of row-->\n\t\t\t\t<\/div><!--end of container-->\n\t\t\t\t\n\t\t\t<\/section>\n\t\t[\/vc_column][\/vc_row][vc_section css=\u201d.vc_custom_1498221020327{padding-top: 0px !important;}\u201d ebor_docs=\u201d\u201d][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[vc_column_text]<\/p>\n<h4>Local Video Background<\/h4>\n<p>This section uses local video files hosted on your own server, required in WEBM, MP4 and OGV formats using the HTML video element. Place the class <strong>.videobg<\/strong> and <strong>.imagebg<\/strong> on the section as described below.<\/p>\n<p><strong>NOTE:<\/strong> The video background element does not display on mobile devices, for these devices, a fallback poster image is used.[\/vc_column_text]<\/div><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_row full_width=\u201dstretch_row\u201d][vc_column]\n\t\t\t<section class=\" imagebg videobg height-60 text-center\" data-overlay=\"4\">\n\t\t\t\t\n\t\t\t\t<video autoplay loop muted playsinline>\n\t\t\t\t\t<source src=\"http:\/\/stack.tommusdemos.wpengine.com\/wp-content\/uploads\/sites\/62\/2017\/01\/video.webm\" type=\"video\/webm\">\n\t\t\t\t\t<source src=\"http:\/\/stack.tommusdemos.wpengine.com\/wp-content\/uploads\/sites\/62\/2017\/01\/video.mp4\" type=\"video\/mp4\">\n\t\t\t\t<\/video>\n\t\t\t\t\t\n\t\t\t\t<div class=\"background-image-holder\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1069\" src=\"https:\/\/i2.wp.com\/radialcircle.com\/wp-content\/uploads\/2017\/01\/blog-6.jpg?fit=1600%2C1069&amp;ssl=1\" class=\"attachment-full size-full\" alt=\"\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t<div class=\"container pos-vertical-center\">\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<div class=\"col-sm-12\">[vc_column_text]<\/p>\n<h2 style=\"text-align: center;\">Here\u2019s a local video being used as a background<\/h2>\n<p>[\/vc_column_text]<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/section>[\/vc_column][\/vc_row][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[vc_column_text]<\/p>\n<h4>Youtube Video Background<\/h4>\n<p>This section uses a video hosted on Youtube. The Youtube background sections requires a div with class <strong>.youtube-background<\/strong> with the data attribute <strong>data-video-url<\/strong> which is the Youtube video\u2019s ID.<\/p>\n<p>Alternative, add the <strong>data-start-at<\/strong> attribute with a numerical value to start the video playing from a particular point ie. a value of 10 would start the video 10 seconds in.<\/p>\n<p>Place the class <strong>.videobg<\/strong> and <strong>.imagebg<\/strong> on the section as described below.<\/p>\n<p><strong>NOTE:<\/strong> The Youtube video background element does not display on mobile devices, for these devices, a fallback poster image is used.[\/vc_column_text]<\/div><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_row full_width=\u201dstretch_row\u201d][vc_column]\n\t\t\t<section class=\" imagebg videobg height-60 text-center\" data-overlay=\"4\">\n\t\t\t\t\n\t\t\t\t<div class=\"youtube-background\" data-video-url=\"M-hGwtvtXCk\" data-start-at=\"17\"><\/div>\n\t\t\t\t\n\t\t\t\t<div class=\"background-image-holder\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1069\" src=\"https:\/\/i2.wp.com\/radialcircle.com\/wp-content\/uploads\/2017\/01\/blog-6.jpg?fit=1600%2C1069&amp;ssl=1\" class=\"attachment-full size-full\" alt=\"\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t<div class=\"container pos-vertical-center\">\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<div class=\"col-sm-12\">[vc_column_text]<\/p>\n<h2 style=\"text-align: center;\">Here\u2019s a YouTube\u00a0video being used as a background<\/h2>\n<p>[\/vc_column_text]<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/section>[\/vc_column][\/vc_row]<\/p>\n<\/body>","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=\u201dstretch_row\u201d][vc_column][\/vc_column][\/vc_row][vc_section css=\u201d.vc_custom_1498221020327{padding-top: 0px !important;}\u201d ebor_docs=\u201d\u201d][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column][\/vc_column][\/vc_row][\/vc_section][vc_row full_width=\u201dstretch_row\u201d][vc_column][\/vc_column][\/vc_row][vc_section][vc_row css=\u201d.vc_custom_1485825445121{margin-bottom: 30px !important;}\u201d][vc_column][\/vc_column][\/vc_row][\/vc_section][vc_row full_width=\u201dstretch_row\u201d][vc_column][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"spay_email":"","footnotes":""},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P8yNrc-44","_links":{"self":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages\/252"}],"collection":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":0,"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/pages\/252\/revisions"}],"wp:attachment":[{"href":"https:\/\/radialcircle.com\/index.php\/wp-json\/wp\/v2\/media?parent=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}