From 2cd4ea40d52d53ab511f4d1d9cc2ff8c163d6b36 Mon Sep 17 00:00:00 2001
From: pollfly <75068813+pollfly@users.noreply.github.com>
Date: Sun, 28 May 2023 09:59:24 +0300
Subject: [PATCH] Modify video player design (#573)

---
 docs/cloud_autoscaling/autoscaling_overview.md     |  2 +-
 docs/getting_started/main.md                       |  2 +-
 .../agent_remote_execution_and_automation.md       |  2 +-
 .../video_tutorials/clearml-data.md                |  2 +-
 .../video_tutorials/core_component_overview.md     |  2 +-
 .../experiment_management_best_practices.md        |  2 +-
 .../video_tutorials/experiment_manager_hands-on.md |  2 +-
 .../how_clearml_is_used_by_a_data_scientist.md     |  2 +-
 .../how_clearml_is_used_by_an_mlops_engineer.md    |  2 +-
 .../ml_ci_cd_using_github_actions_and_clearml.md   |  2 +-
 .../hyperdatasets_data_versioning.md               |  2 +-
 .../video_tutorials/hyperparameter_optimization.md |  2 +-
 .../video_tutorials/pipelines_from_code.md         |  2 +-
 .../video_tutorials/pipelines_from_tasks.md        |  2 +-
 .../video_tutorials/quick_introduction.md          |  2 +-
 .../video_tutorials/the_clearml_autoscaler.md      |  2 +-
 docs/model_registry.md                             |  2 +-
 docs/webapp/webapp_reports.md                      |  2 +-
 src/css/custom.css                                 | 14 ++++++++++++++
 19 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/docs/cloud_autoscaling/autoscaling_overview.md b/docs/cloud_autoscaling/autoscaling_overview.md
index e96b6e28..a3144bb7 100644
--- a/docs/cloud_autoscaling/autoscaling_overview.md
+++ b/docs/cloud_autoscaling/autoscaling_overview.md
@@ -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" 
diff --git a/docs/getting_started/main.md b/docs/getting_started/main.md
index d164645d..1e3161f4 100644
--- a/docs/getting_started/main.md
+++ b/docs/getting_started/main.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/agent_remote_execution_and_automation.md b/docs/getting_started/video_tutorials/agent_remote_execution_and_automation.md
index 16dc947b..86049d35 100644
--- a/docs/getting_started/video_tutorials/agent_remote_execution_and_automation.md
+++ b/docs/getting_started/video_tutorials/agent_remote_execution_and_automation.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/clearml-data.md b/docs/getting_started/video_tutorials/clearml-data.md
index ada0b7e8..88ecce8d 100644
--- a/docs/getting_started/video_tutorials/clearml-data.md
+++ b/docs/getting_started/video_tutorials/clearml-data.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/core_component_overview.md b/docs/getting_started/video_tutorials/core_component_overview.md
index 12aef0d3..53b18625 100644
--- a/docs/getting_started/video_tutorials/core_component_overview.md
+++ b/docs/getting_started/video_tutorials/core_component_overview.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/experiment_management_best_practices.md b/docs/getting_started/video_tutorials/experiment_management_best_practices.md
index 0c850f70..28725731 100644
--- a/docs/getting_started/video_tutorials/experiment_management_best_practices.md
+++ b/docs/getting_started/video_tutorials/experiment_management_best_practices.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/experiment_manager_hands-on.md b/docs/getting_started/video_tutorials/experiment_manager_hands-on.md
index 53a3b1f3..fd62311c 100644
--- a/docs/getting_started/video_tutorials/experiment_manager_hands-on.md
+++ b/docs/getting_started/video_tutorials/experiment_manager_hands-on.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_a_data_scientist.md b/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_a_data_scientist.md
index 7fafa642..b4e23263 100644
--- a/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_a_data_scientist.md
+++ b/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_a_data_scientist.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_an_mlops_engineer.md b/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_an_mlops_engineer.md
index e043b158..a151612e 100644
--- a/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_an_mlops_engineer.md
+++ b/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/how_clearml_is_used_by_an_mlops_engineer.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/ml_ci_cd_using_github_actions_and_clearml.md b/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/ml_ci_cd_using_github_actions_and_clearml.md
index 8eda1061..49cf58cd 100644
--- a/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/ml_ci_cd_using_github_actions_and_clearml.md
+++ b/docs/getting_started/video_tutorials/hands-on_mlops_tutorials/ml_ci_cd_using_github_actions_and_clearml.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/hyperdatasets_data_versioning.md b/docs/getting_started/video_tutorials/hyperdatasets_data_versioning.md
index 2912b310..f970ba52 100644
--- a/docs/getting_started/video_tutorials/hyperdatasets_data_versioning.md
+++ b/docs/getting_started/video_tutorials/hyperdatasets_data_versioning.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/hyperparameter_optimization.md b/docs/getting_started/video_tutorials/hyperparameter_optimization.md
index a06a4a00..588d8029 100644
--- a/docs/getting_started/video_tutorials/hyperparameter_optimization.md
+++ b/docs/getting_started/video_tutorials/hyperparameter_optimization.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/pipelines_from_code.md b/docs/getting_started/video_tutorials/pipelines_from_code.md
index 116f86fd..65f9f430 100644
--- a/docs/getting_started/video_tutorials/pipelines_from_code.md
+++ b/docs/getting_started/video_tutorials/pipelines_from_code.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/pipelines_from_tasks.md b/docs/getting_started/video_tutorials/pipelines_from_tasks.md
index 9be84677..ab6bd4f7 100644
--- a/docs/getting_started/video_tutorials/pipelines_from_tasks.md
+++ b/docs/getting_started/video_tutorials/pipelines_from_tasks.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/quick_introduction.md b/docs/getting_started/video_tutorials/quick_introduction.md
index 2ac0eba8..d25eb3d0 100644
--- a/docs/getting_started/video_tutorials/quick_introduction.md
+++ b/docs/getting_started/video_tutorials/quick_introduction.md
@@ -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" 
diff --git a/docs/getting_started/video_tutorials/the_clearml_autoscaler.md b/docs/getting_started/video_tutorials/the_clearml_autoscaler.md
index acb7897a..e15d1b96 100644
--- a/docs/getting_started/video_tutorials/the_clearml_autoscaler.md
+++ b/docs/getting_started/video_tutorials/the_clearml_autoscaler.md
@@ -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" 
diff --git a/docs/model_registry.md b/docs/model_registry.md
index 31d5d791..574526af 100644
--- a/docs/model_registry.md
+++ b/docs/model_registry.md
@@ -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" 
diff --git a/docs/webapp/webapp_reports.md b/docs/webapp/webapp_reports.md
index 6682c0db..1d66b49e 100644
--- a/docs/webapp/webapp_reports.md
+++ b/docs/webapp/webapp_reports.md
@@ -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" 
diff --git a/src/css/custom.css b/src/css/custom.css
index 9c7e808d..95f2d2c0 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -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);
 }
\ No newline at end of file