修改wordpress自带的视频播放样式

综合

html的css样式通过js来修改不太会。

只好来修改wp自带的播放器样式。

播放

 

自带样式

 

知乎样式

 

苹果样式

 

我把原声的html和css样式粘贴出来,大家可以拿去。

[这段话去掉video width=”1920″ height=”1080″ poster=”https://www.imaiko.com/wp-content/uploads/2019/01/website-mockups00028.jpg” m4v=”https://www.imaiko.com/wp-content/uploads/2019/02/2019-wordpress-教程总纲.m4v”][/video]

.mejs-container .mejs-overlay-button {
background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2086%2086%22%3E%0A%3Cdefs%3E%3Cstyle%3E.fill%7Bfill%3A%23fff%3B%7D.no-fill%7Bfill%3Anone%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22fill%22%20d%3D%22M72.05%2C41.32c-0.31-0.53-0.64-0.86-1.21-1.24S29.7%2C13.49%2C29%2C13.12s-1.04-0.62-1.85-0.63%0A%09s-1.24%2C0.2-1.73%2C0.49s-1.07%2C0.99-1.24%2C1.74s-0.17%2C2.16-0.17%2C3V66.1c0%2C0.39%2C0%2C1.1%2C0%2C2.15c0%2C0.85-0.01%2C2.26%2C0.17%2C3%0A%09s0.75%2C1.45%2C1.24%2C1.74s0.92%2C0.51%2C1.73%2C0.49s1.15-0.25%2C1.85-0.63S70.37%2C46.2%2C70.84%2C45.89c0.48-0.31%2C0.9-0.69%2C1.21-1.24%0A%09s0.45-1.1%2C0.45-1.67C72.5%2C42.43%2C72.36%2C41.85%2C72.05%2C41.32z%22%2F%3E%0A%3Crect%20class%3D%22no-fill%22%20id%3D%22Bounding-Box%22%20width%3D%2286%22%20height%3D%2286%22%2F%3E%0A%3C%2Fsvg%3E%0A");
background-position: 0 ; 
height: 86px;
width: 86px;
}


.mejs-container .mejs-overlay:hover>.mejs-overlay-button {
background-position: 0;
/*background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2086%2086%22%3E%0A%3Cdefs%3E%3Cstyle%3E.fill%7Bfill%3A%23fff%3B%7D.no-fill%7Bfill%3Anone%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22fill%22%20d%3D%22M53%2C15h6c1.66%2C0%2C3%2C1.34%2C3%2C3v50c0%2C1.66-1.34%2C3-3%2C3h-6c-1.66%2C0-3-1.34-3-3V18C50%2C16.34%2C51.34%2C15%2C53%2C15z%0A%09%20M24%2C18v50c0%2C1.66%2C1.34%2C3%2C3%2C3h6c1.66%2C0%2C3-1.34%2C3-3V18c0-1.66-1.34-3-3-3h-6C25.34%2C15%2C24%2C16.34%2C24%2C18z%22%2F%3E%0A%3Crect%20class%3D%22no-fill%22%20id%3D%22Bounding-Box%22%20width%3D%2286%22%20height%3D%2286%22%2F%3E%0A%3C%2Fsvg%3E%0A");*/

}
.mejs-container .mejs-controls {
background: transparent !important;
}

.mejs-time-buffering, .mejs-time-current, 
.mejs-time-float, .mejs-time-float-corner, 
.mejs-time-float-current, .mejs-time-hovered, .mejs-time-loaded, 
.mejs-time-marker, .mejs-time-total {
border-radius: 2px !important;
height: 4px !important;
}

.mejs-time-total {
margin: 8px 0 0 !important;
}

.mejs-time-handle, .mejs-time-handle-content {
display: none !important;
}

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
background: rgba(99, 97, 104, 0.67) !important;
}

.mejs-container .mejs-fullscreen-button>button{
background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cdefs%3E%3Cstyle%3E.fill%7Bfill%3A%23fff%3B%7D.no-fill%7Bfill%3Anone%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22fill%22%20d%3D%22M6.87%2C9.97l-4.89%2C4.9C2.17%2C14.96%2C2.38%2C15%2C2.61%2C15h3.91c0.28%2C0%2C0.5%2C0.22%2C0.5%2C0.5S6.79%2C16%2C6.51%2C16%0A%09%09H2.61C1.17%2C16%2C0%2C14.82%2C0%2C13.37V9.51c0-0.28%2C0.22-0.5%2C0.5-0.5S1%2C9.23%2C1%2C9.51v3.86c0%2C0.23%2C0.05%2C0.45%2C0.13%2C0.65l4.89-4.89%0A%09%09c0.23-0.23%2C0.61-0.23%2C0.85%2C0C7.1%2C9.36%2C7.1%2C9.74%2C6.87%2C9.97z%20M13.4%2C0H9.5C9.23%2C0%2C9%2C0.22%2C9%2C0.5S9.23%2C1%2C9.5%2C1h3.89%0A%09%09c0.22%2C0%2C0.43%2C0.05%2C0.63%2C0.13L9.09%2C6.06c-0.23%2C0.23-0.23%2C0.61%2C0%2C0.85c0.12%2C0.12%2C0.27%2C0.18%2C0.42%2C0.18s0.31-0.06%2C0.42-0.18l4.93-4.93%0A%09%09C14.95%2C2.18%2C15%2C2.4%2C15%2C2.63V6.5C15%2C6.78%2C15.23%2C7%2C15.5%2C7S16%2C6.78%2C16%2C6.5V2.63C16%2C1.18%2C14.83%2C0%2C13.4%2C0z%22%2F%3E%0A%3Crect%20class%3D%22no-fill%22%20id%3D%22Bounding-Box%22%20width%3D%2216%22%20height%3D%2216%22%2F%3E%0A%3C%2Fsvg%3E%0A");
height: 16px;
width: 16px;
}

.mejs-container .mejs-volume-button>.mejs-volume-slider {
background: transparent;
}
.mejs-container .mejs-volume-button.mejs-mute>button {
background:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%3E%0A%3Cdefs%3E%3Cstyle%3E.fill%7Bfill%3A%23fff%3B%7D.no-fill%7Bfill%3Anone%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22fill%22%20d%3D%22M16.07%2C15.9c-0.14%2C0-0.29-0.05-0.4-0.16c-0.23-0.22-0.24-0.58-0.02-0.81%0A%09%09c1.79-1.88%2C2.78-4.34%2C2.78-6.93c0-2.62-1-5.09-2.82-6.97c-0.22-0.23-0.22-0.6%2C0-0.82c0.22-0.22%2C0.58-0.23%2C0.8%2C0%0A%09%09c0.01%2C0.01%2C0.04%2C0.04%2C0.05%2C0.06c2%2C2.07%2C3.12%2C4.83%2C3.12%2C7.74c0%2C2.89-1.1%2C5.63-3.1%2C7.73C16.37%2C15.84%2C16.22%2C15.9%2C16.07%2C15.9z%0A%09%09%20M12.91%2C13.03c1.36-1.29%2C2.17-3.17%2C2.17-5.03c0-1.85-0.81-3.73-2.17-5.03c-0.23-0.22-0.59-0.21-0.81%2C0.02%0A%09%09c-0.22%2C0.23-0.21%2C0.59%2C0.02%2C0.81c1.14%2C1.09%2C1.82%2C2.66%2C1.82%2C4.2c0%2C1.55-0.68%2C3.12-1.81%2C4.2c-0.23%2C0.22-0.24%2C0.58-0.02%2C0.81%0A%09%09c0.11%2C0.12%2C0.26%2C0.18%2C0.42%2C0.18C12.65%2C13.19%2C12.79%2C13.14%2C12.91%2C13.03z%20M7.68%2C1.74L4%2C5.01H0.99C0.48%2C5.01%2C0%2C5.44%2C0%2C5.99v3.98%0A%09%09c0%2C0.57%2C0.48%2C0.99%2C1%2C0.99h3l3.67%2C3.3c0.16%2C0.16%2C0.36%2C0.25%2C0.56%2C0.25c0.1%2C0%2C0.19-0.02%2C0.28-0.05C8.81%2C14.34%2C9%2C14.06%2C9%2C13.75V2.26%0A%09%09c0.01-0.31-0.18-0.6-0.48-0.71C8.23%2C1.44%2C7.9%2C1.52%2C7.68%2C1.74z%22%2F%3E%0A%3Crect%20class%3D%22no-fill%22%20id%3D%22Bounding-Box%22%20width%3D%2220%22%20height%3D%2216%22%2F%3E%0A%3C%2Fsvg%3E");
height: 16px;
width: 20px;}
.mejs-container .mejs-volume-button>button {
background:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%3E%0A%3Cdefs%3E%3Cstyle%3E.fill%7Bfill%3A%23fff%3B%7D.no-fill%7Bfill%3Anone%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22fill%22%20d%3D%22M9%2C7.48L5.34%2C3.81l2.34-2.07c0.21-0.23%2C0.55-0.3%2C0.84-0.19C8.82%2C1.66%2C9.01%2C1.95%2C9%2C2.26V7.48z%0A%09%09%20M9%2C12.29v1.46c0%2C0.31-0.19%2C0.59-0.49%2C0.71c-0.09%2C0.03-0.18%2C0.05-0.28%2C0.05c-0.21%2C0-0.41-0.09-0.56-0.25L4%2C11H1%0A%09%09c-0.51%2C0-1-0.42-1-0.99V5.98C0%2C5.43%2C0.48%2C5%2C0.99%2C5h0.74L9%2C12.29z%20M12.57%2C13.91c0.13-0.01%2C0.26-0.07%2C0.35-0.17%0A%09%09c0.19-0.21%2C0.17-0.52-0.04-0.71L2.07%2C2.21C1.86%2C2.03%2C1.55%2C2.04%2C1.36%2C2.26C1.18%2C2.47%2C1.19%2C2.78%2C1.41%2C2.96l10.81%2C10.82%0A%09%09C12.31%2C13.88%2C12.44%2C13.92%2C12.57%2C13.91z%22%2F%3E%0A%3Crect%20class%3D%22no-fill%22%20id%3D%22Bounding-Box%22%20width%3D%2220%22%20height%3D%2216%22%2F%3E%0A%3C%2Fsvg%3E");
height: 16px;
width: 16px; 
}

关注微信公众号

上一篇文章
2019 总教程 Tyler
下一篇文章
密码保护:Ticketbuynow网站SEO 2019 综合指导
菜单