Modify video player design (#573)

This commit is contained in:
pollfly 2023-05-28 09:59:24 +03:00 committed by GitHub
parent e77448ff88
commit 2cd4ea40d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 32 additions and 18 deletions

View File

@ -2,7 +2,7 @@
title: Overview
---
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/j4XVMAaUt3E"
title="YouTube video player"

View File

@ -12,7 +12,7 @@ while ClearML ensures your work is reproducible and scalable.
## Getting Started
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%', marginBottom: '32px' }} >
<div class="vid">
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/s3k9ntmQmD4"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, ClearML agent]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/MX3BrXnaULs?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, ClearML data]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/S2pz9jn26uI?rel=0"
title="YouTube video player"

View File

@ -6,7 +6,7 @@ keywords: [mlops, components]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/s3k9ntmQmD4?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, Experiment Manager]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/kyOfwVg05EM?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, Experiment Manager]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/bjWwZAzDxTY?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, machine learning, data scientist]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/quSGXvuK1IM?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, machine learning, mlops engineer]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/7aKZGp1YOlo?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, GitHub Actions, CI/CD]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/k5e-E5oEFUw?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, hyperdatasets]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/1VliYRexeLU?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, hyperparameter optimization, hyperparameter]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/dLkP7y4USFg?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, automation, orchestration, pipeline]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/UVBk337xzZo?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, automation, orchestration, pipeline]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/prZ_eiv_y3c?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, features, ClearML]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/-9vqxF2UfFU?rel=0"
title="YouTube video player"

View File

@ -7,7 +7,7 @@ keywords: [mlops, components, Autoscaler]
## Video Tutorial
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/j4XVMAaUt3E?rel=0"
title="YouTube video player"

View File

@ -3,7 +3,7 @@ title: Model Registry
---
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/lAiw2HqHlWo?rel=0"
title="YouTube video player"

View File

@ -2,7 +2,7 @@
title: Reports
---
<div style={{position: 'relative', overflow: 'hidden', width: '100%', paddingTop: '56.25%' }} >
<div class="vid" >
<iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/D6fCvpmV8eo"
title="YouTube video player"

View File

@ -991,4 +991,18 @@ html[data-theme=dark] .cml-card i {
html[data-theme=dark] .cml-card i {
background-color: var(--ifm-background-color);
border-color: var(--ifm-color-gray-800);
}
.vid {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
background-color: rgba(0,0,0,0.1);
border: 12px solid rgba(0,0,0,0.1);
border-radius: calc(var(--ifm-card-border-radius) * 1.5);
}
html[data-theme=dark] .vid {
border-color: rgba(0,0,0,0.3);
background-color: rgba(0,0,0,0.3);
}