.wp-block-embed:not(.wp-has-aspect-ratio) .wp-block-embed__wrapper {
aspect-ratio: 16/9;
}
.oembed-preview {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center center;
background-color: #333;
border-radius: 10px;
}
.oembed-preview-icon {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 100%;
color: white;
text-shadow: 0 0 20px rgba( 0, 0, 0, 0.4 );
}
.oembed-preview-icon span {
font-size: 200%;
}
.oembed-preview-icon:hover {
cursor: pointer;
}
.oembed-preview-cover {
background: rgba( 0, 0, 0, 0.8 );
padding: 0.4em 0.8em;
box-sizing: border-box;
text-align: center;
border-radius: 10px;
display: none;
}
.oembed-type-icon {
font-size: 160%;
line-height: 1;
display: inline-block;
vertical-align: middle;
margin: 0 0.2em 0 0;
color: white;
}
.oembed-preview-cover h2 {
color: white;
font-size: 120%;
margin: 0;
}
.oembed-preview-cover p {
color: white;
font-size: 75%;
margin-bottom: 1em;
max-width: 100% !important;
}
.oembed-preview-cover a {
color: white;
font-weight: normal;
border-color: rgba( 255, 255, 255, 0.4 );
}
body .oembed-preview-cover a:hover,
body .oembed-preview-cover a:focus,
body .oembed-preview-cover a:active {
background: transparent;
}
.oembed-preview-cover button {
background: rgba( 255, 255, 255, 0.9 );
border-radius: 16px;
padding: 0.5em 0.8em;
margin-bottom: 0.2em;
color: black;
border: 0;
}
.oembed-preview-cover button:hover {
cursor: pointer;
background: white;
color: black;
}
.oembed-preview-cover button:focus,
.oembed-preview-cover button:active {
outline: none;
box-shadow: 0 0 0 4px gold;
}
.oembed-preview-cover button span {
font-size: 150%;
vertical-align: middle;
margin-right: 0.2em;
}
.oembed-code {
display: none;
}