/* cssP-1.0 */
iframe { display: inline-block; } .video-wall {background-position:center center;max-width:100%; position: relative; font: 400 1em/1.46 Helvetica, Arial, sans-serif; color: #333; display: inline-block; min-height: 18em; min-width: 28em; margin: 0; background-color: #eee; box-sizing: border-box; border: 1px solid #000; padding: 1em; } .video-wall strong { display: block; text-align: center; font-size: 1.1em; margin: 0; } .video-wall div { position: absolute; width: calc(100% - 2em); top: 2em; height:2em;line-height:2em; overflow-y: auto; } .video-wall p { font-size: 0.8em; margin: 0 0 1em; } .video-wall a { color: inherit; } .video-wall .video-link { display: block; white-space: nowrap; font-size: 0.8em; margin: 0; position: absolute; left: 50%; bottom: 6em; transform: translateX(-50%); } .video-wall button { -webkit-appearance: none; cursor: pointer; color: #eee; font: 700 0.8em/1.2 Helvetica, Arial, sans-serif; display: block; width: 11.5em; height: 4.25em; border: 0 none; border-radius: 0.75em; padding: 0 0 0 5.5em; text-align: left; margin: 0; position: absolute; left: 50%; bottom: 1em; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23eee' d='M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1em center #666; background-size: 3.5em; transition: background-color 0.3s; } .video-wall button:hover { background-color: #444; }