/** * Copyright 2025 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .video { margin: auto; width: 100%; .video__wrapper { height: 0; position: relative; } iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } } .video--widescreen .video__wrapper { padding-bottom: 56.25%; } .video--standard .video__wrapper { padding-bottom: 75%; } .video--preview { cursor: pointer; .video__wrapper::after { background-color: rgba(200, 200, 200, 0.8); border-radius: 50%; color: #444; content: '\f144'; font-family: FontAwesome; font-size: 80px; left: 50%; line-height: 68px; margin-left: -40px; margin-top: -40px; padding: 10px; position: absolute; top: 50%; @include transition(color 0.3s linear); @include transition(background-color 0.3s linear); } &:hover { .video__wrapper::after { background-color: rgba(50, 50, 50, 0.8); color: #d00; } } }