flash
d5bb0bb475
Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
168 lines
3.3 KiB
CSS
168 lines
3.3 KiB
CSS
.embed {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.embed iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.embedph {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
color: var(--text-colour);
|
|
text-decoration: none;
|
|
}
|
|
.embedph:hover .embedph-bg img,
|
|
.embedph:active .embedph-bg img,
|
|
.embedph:focus .embedph-bg img,
|
|
.embedph:focus-within .embedph-bg img {
|
|
transform: scale(1.1);
|
|
filter: blur(10px) brightness(80%);
|
|
}
|
|
.embedph:hover .embedph-info,
|
|
.embedph:active .embedph-info,
|
|
.embedph:focus .embedph-info,
|
|
.embedph:focus-within .embedph-info {
|
|
opacity: 0;
|
|
}
|
|
.embedph:hover .embedph-play,
|
|
.embedph:active .embedph-play,
|
|
.embedph:focus .embedph-play,
|
|
.embedph:focus-within .embedph-play {
|
|
opacity: 1;
|
|
}
|
|
.embedph-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.embedph-bg img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
will-change: transform, filter;
|
|
transition: transform .2s, filter .2s;
|
|
}
|
|
.embedph-fg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.embedph-info {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
will-change: opacity;
|
|
transition: opacity .2s;
|
|
}
|
|
.embedph-info-wrap {
|
|
margin: 5px;
|
|
background-color: var(--background-colour-translucent-8);
|
|
border-radius: 5px;
|
|
display: flex;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
.embedph-info-bar {
|
|
width: 5px;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
flex: 0 0 auto;
|
|
background-color: var(--embedph-colour, var(--accent-colour));
|
|
}
|
|
.embedph-info-body {
|
|
margin: 10px;
|
|
margin-left: 5px;
|
|
}
|
|
.embedph-info-title {
|
|
font-size: 2em;
|
|
font-weight: 400;
|
|
line-height: 1.1em;
|
|
margin-bottom: 5px;
|
|
}
|
|
.embedph-info-desc {
|
|
line-height: 1.4em;
|
|
margin: .5em 0;
|
|
}
|
|
.embedph-info-site {
|
|
font-size: .9em;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.embedph-info-title {
|
|
font-size: 1.5em;
|
|
line-height: 1.2em;
|
|
}
|
|
.embedph-info-desc {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.embedph-play {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
will-change: opacity;
|
|
transition: opacity .2s;
|
|
}
|
|
.embedph-play-internal {
|
|
margin-top: 40px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.embedph-play-external {
|
|
padding: 5px 10px;
|
|
font-size: 1.2em;
|
|
line-height: 1.5em;
|
|
text-decoration: none;
|
|
color: var(--text-colour);
|
|
background-color: var(--background-colour-translucent-6);
|
|
border-radius: 5px;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
will-change: background-color;
|
|
transition: background-color .2s, transform .2s;
|
|
}
|
|
.embedph-play-external:hover,
|
|
.embedph-play-external:focus {
|
|
background-color: var(--background-colour-translucent-8);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.embed-youtube,
|
|
.embedph-youtube {
|
|
aspect-ratio: 16 / 9;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 560px;
|
|
max-height: 315px;
|
|
}
|
|
|
|
.embed-nicovideo,
|
|
.embedph-nicovideo {
|
|
aspect-ratio: 16 / 9;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 640px;
|
|
max-height: 360px;
|
|
}
|