1"use strict";(self.webpackChunkdocusaurus=self.webpackChunkdocusaurus||[]).push([[835],{28453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>a});var r=t(96540);const i={},s=r.createContext(i);function o(e){const n=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:n},e.children)}},74012:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>p,frontMatter:()=>s,metadata:()=>a,toc:()=>c});var r=t(74848),i=t(28453);const s={title:"Overriding player CSS"},o=void 0,a={id:"player/v1/advanced/overriding-css",title:"Overriding player CSS",description:"If the player is embedded via scripts (instead of the iframe generated from dashboard), then the player DOM elements",source:"@site/docs/player/v1/advanced/overriding-css.md",sourceDirName:"player/v1/advanced",slug:"/player/v1/advanced/overriding-css",permalink:"/docs/player/v1/advanced/overriding-css",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"Overriding player CSS"},sidebar:"player",previous:{title:"Tracking Errors",permalink:"/docs/player/v1/advanced/tracking-errors"},next:{title:"Custom playback rates",permalink:"/docs/player/v1/advanced/custom-playback-rates"}},d={},c=[{value:"Examples",id:"examples",level:2},{value:"Hiding fullscreen button",id:"hiding-fullscreen-button",level:3},{value:"Hiding the speed selection menu",id:"hiding-the-speed-selection-menu",level:3},{value:"Hiding the cog-wheel settings icon",id:"hiding-the-cog-wheel-settings-icon",level:3}];function l(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,i.R)(),...e.components},{Head:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Head",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t,{children:(0,r.jsx)("meta",{name:"robots",content:"noindex"})}),"\n",(0,r.jsxs)(n.p,{children:["If the player is embedded via scripts (instead of the iframe generated from dashboard), then the player DOM elements\nare loaded on the same page as the rest of the web page. This allows you to override the CSS by specifying the CSS\nanywhere on the page and changing the player directly. Below are some of the examples to get you started. If you\nneed any other examples, please reach us at ",(0,r.jsx)(n.a,{href:"mailto:[email protected]",children:"[email protected]"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,r.jsxs)(n.p,{children:["Player elements have multiple CSS rules defined. To override it, the rule need to be more specific so as\nto get higher priority in CSS cascading order. You can use ",(0,r.jsx)(n.code,{children:"!important"})," to make it work."]}),"\n",(0,r.jsx)(n.h3,{id:"hiding-fullscreen-button",children:"Hiding fullscreen button"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".vc-container .ytp-fullscreen-button {\n display: none !important;\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"hiding-the-speed-selection-menu",children:"Hiding the speed selection menu"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".vc-container .speedMenuButton {\n display: none !important;\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"hiding-the-cog-wheel-settings-icon",children:"Hiding the cog-wheel settings icon"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".vc-container .ytp-settings-button {\n display: none !important;\n}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.