ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-06-26 18:17:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Modify video player design (#573)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/cloud_autoscaling/autoscaling_overview.md
View File

@ -2,7 +2,7 @@
title: Overview 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%'}} <iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/j4XVMAaUt3E" src="https://www.youtube.com/embed/j4XVMAaUt3E"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/main.md
View File

@ -12,7 +12,7 @@ while ClearML ensures your work is reproducible and scalable.
## Getting Started ## 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%'}} <iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/s3k9ntmQmD4" src="https://www.youtube.com/embed/s3k9ntmQmD4"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/agent_remote_execution_and_automation.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, ClearML agent]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/MX3BrXnaULs?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/clearml-data.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, ClearML data]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/S2pz9jn26uI?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/core_component_overview.md
View File

@ -6,7 +6,7 @@ keywords: [mlops, components]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/s3k9ntmQmD4?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/experiment_management_best_practices.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, Experiment Manager]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/kyOfwVg05EM?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/experiment_manager_hands-on.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, Experiment Manager]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/bjWwZAzDxTY?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_a_data_scientist.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, machine learning, data scientist]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/quSGXvuK1IM?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_an_mlops_engineer.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, machine learning, mlops engineer]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/7aKZGp1YOlo?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/hands-on_mlops_tutorials/ml_ci_cd_using_github_actions_and_clearml.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, GitHub Actions, CI/CD]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/k5e-E5oEFUw?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/hyperdatasets_data_versioning.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, hyperdatasets]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/1VliYRexeLU?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/hyperparameter_optimization.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, hyperparameter optimization, hyperparameter]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/dLkP7y4USFg?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/pipelines_from_code.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, automation, orchestration, pipeline]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/UVBk337xzZo?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/pipelines_from_tasks.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, automation, orchestration, pipeline]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/prZ_eiv_y3c?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/quick_introduction.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, features, ClearML]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/-9vqxF2UfFU?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/getting_started/video_tutorials/the_clearml_autoscaler.md
View File

@ -7,7 +7,7 @@ keywords: [mlops, components, Autoscaler]
## Video Tutorial ## 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%'}} <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" src="https://www.youtube.com/embed/j4XVMAaUt3E?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/model_registry.md
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%'}} <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" src="https://www.youtube.com/embed/lAiw2HqHlWo?rel=0"
title="YouTube video player" title="YouTube video player"

2
docs/webapp/webapp_reports.md
View File

@ -2,7 +2,7 @@
title: Reports 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%'}} <iframe style={{position: 'absolute', top: '0', left: '0', bottom: '0', right: '0', width: '100%', height: '100%'}}
src="https://www.youtube.com/embed/D6fCvpmV8eo" src="https://www.youtube.com/embed/D6fCvpmV8eo"
title="YouTube video player" title="YouTube video player"

14
src/css/custom.css
View File

@ -992,3 +992,17 @@ html[data-theme=dark] .cml-card i {
background-color: var(--ifm-background-color); background-color: var(--ifm-background-color);
border-color: var(--ifm-color-gray-800); 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);
}