{"id":365,"date":"2021-08-06T18:14:53","date_gmt":"2021-08-06T21:14:53","guid":{"rendered":"https:\/\/untura.com\/?p=365"},"modified":"2021-08-06T19:18:37","modified_gmt":"2021-08-06T22:18:37","slug":"adding-a-loading-spinner-while-videos-load-in-oxygen-builder","status":"publish","type":"post","link":"https:\/\/untura.com\/en\/wordpress\/oxygen\/adding-a-loading-spinner-while-videos-load-in-oxygen-builder\/","title":{"rendered":"Adding a loading spinner while videos load in Oxygen Builder"},"content":{"rendered":"<p>When you have a page full of Youtube videos, they will take a while to load and leave an empty space. To offer a better experience to your visitors, let's create a spinner (loading dots in this case) that will show if the video hasn't loaded yet and also give it a background color to make it clear that there will be something in that space.<\/p>\n\n\n\n<p>Copy the code below and paste it into a Stylesheet inside Oxygen. It will automatically work for all videos added with Oxygen video module:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Spinner while video loads *\/\r\n.ct-video {\r\n    background-color: rgb(220 220 220 \/ 50%);\r\n    position: relative;\r\n}\r\n.ct-video .oxygen-vsb-responsive-video-wrapper {\r\n    z-index: 1;\r\n}\r\n\r\n\/* loading dots *\/\r\n\r\n.ct-video:after {\r\n\tcontent: \" .\";\r\n\tanimation: dots 1s steps(5, end) infinite;\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\tfont-size: 50px;\r\n\ttransform: translate(-50%,-50%);\r\n}\r\n\r\n@keyframes dots {\r\n\t0%,\r\n\t20% {\r\n\t\tcolor: rgba(0, 0, 0, 0);\r\n\t\ttext-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\r\n\t}\r\n\t40% {\r\n\t\tcolor: #373a3c;\r\n\t\ttext-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\r\n\t}\r\n\t60% {\r\n\t\ttext-shadow: 0.25em 0 0 #373a3c, 0.5em 0 0 rgba(0, 0, 0, 0);\r\n\t}\r\n\t80%,\r\n\t100% {\r\n\t\ttext-shadow: 0.25em 0 0 #373a3c, 0.5em 0 0 #373a3c;\r\n\t}\r\n}<\/code><\/pre>\n\n\n\n<p>Result:<\/p>\n\n\n\n<div class=\"ct-video\" style=\"width: 100%\">\n<div class=\"oxygen-vsb-responsive-video-wrapper\" style=\"padding-bottom: 56.25%;\"><\/div>\n<\/div>\n\n<style>\n\/* Spinner while video loads *\/\n.ct-video {\n    background-color: rgb(220 220 220 \/ 50%);\n    position: relative;\n}\n.ct-video .oxygen-vsb-responsive-video-wrapper {\n    z-index: 1;\n}\n\n\/* loading dots *\/\n\n.ct-video:after {\n\tcontent: \" .\";\n\tanimation: dots 1s steps(5, end) infinite;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tfont-size: 50px;\n\ttransform: translate(-50%,-50%);\n}\n\n@keyframes dots {\n\t0%,\n\t20% {\n\t\tcolor: rgba(0, 0, 0, 0);\n\t\ttext-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\t40% {\n\t\tcolor: #373a3c;\n\t\ttext-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\t60% {\n\t\ttext-shadow: 0.25em 0 0 #373a3c, 0.5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\t80%,\n\t100% {\n\t\ttext-shadow: 0.25em 0 0 #373a3c, 0.5em 0 0 #373a3c;\n\t}\n}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>When you have a page full of Youtube videos, they will take a while to load and leave an empty space. To offer a better experience to your visitors, let's create a spinner (loading dots in this case) that will show if the video hasn't loaded yet and also give it a background color to<a href=\"https:\/\/untura.com\/en\/wordpress\/oxygen\/adding-a-loading-spinner-while-videos-load-in-oxygen-builder\/\" class=\"more-link\">...leia mais<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"ct_builder_shortcodes":"","ct_template_type":"","ct_parent_template":0,"footnotes":""},"categories":[5,8],"tags":[],"class_list":["post-365","post","type-post","status-publish","format-standard","hentry","category-oxygen","category-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/posts\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":13,"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/posts\/365\/revisions"}],"predecessor-version":[{"id":379,"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/posts\/365\/revisions\/379"}],"wp:attachment":[{"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/media?parent=365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/categories?post=365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/untura.com\/en\/wp-json\/wp\/v2\/tags?post=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}