.wp-block-embed:not(.wp-has-aspect-ratio) .wp-block-embed__wrapper {
aspect-ratio: 16/9;
}
.wp-block-embed__wrapper {
max-width: 100%;
}
.wp-block-embed iframe {
width: 100% !important;
height: auto !important;
}
.wp-block-embed.is-type-video iframe {
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;
}
.oembed-preview[data-oembed-type="youtube"],
.oembed-preview[data-oembed-type="vimeo"] {
aspect-ratio: 16/9;
}
.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.7 );
backdrop-filter: blur( 5px );
padding: 0.4em 0.8em;
margin: 0.5rem;
box-sizing: border-box;
text-align: center;
border-radius: 10px;
display: none;
}
.oembed-type-icon {
display: inline-block;
vertical-align: middle;
width: 64px;
height: 64px;
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%;
line-height: 1.2;
margin-top: 0.4em;
margin-bottom: 1em;
padding: 0;
max-width: 100% !important;
}
.oembed-preview-cover a,
.oembed-preview-cover a:hover {
color: white;
text-decoration: underline;
}
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: 2em;
padding: 0.5em 0.8em;
margin-bottom: 0.2em;
color: black;
border: 0;
font-size: 90%;
}
.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;
} .wpb_video_widget.vc_video-aspect-ratio-169 .wpb_video_wrapper,
.wpb_video_widget .wpb_video_wrapper {
padding-top: 0 !important;
aspect-ratio: 16/9;
}