.ep-lazy-iframe-placeholder, .ose-embedpress-responsive iframe {
display: block;
position: relative;
background: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
transition: opacity 0.3s ease-in-out;
} .ep-lazy-iframe-placeholder::before, .ose-embedpress-responsive iframe::before {
content: '';
display: block;
padding-top: 56.25%; } .ep-lazy-iframe-placeholder::after, .ose-embedpress-responsive iframe::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid #e0e0e0;
border-top-color: #5B4E96;
border-radius: 50%;
animation: ep-lazy-spin 0.8s linear infinite;
} .ep-lazy-loading {
opacity: 0.7;
} .ep-lazy-loaded {
opacity: 1;
animation: ep-lazy-fade-in 0.3s ease-in-out;
} @keyframes ep-lazy-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
} .ep-lazy-error {
background: #ffebee;
border-color: #ef5350;
}
.ep-lazy-error::after {
content: '⚠';
font-size: 40px;
color: #ef5350;
border: none;
animation: none;
width: auto;
height: auto;
margin: -20px 0 0 -20px;
} @keyframes ep-lazy-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} iframe[data-ep-lazy-loaded="true"] {
display: block;
max-width: 100%;
} @media (max-width: 768px) {
.ep-lazy-iframe-placeholder::after {
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
border-width: 2px;
}
}