diff --git a/source/_patterns/02-molecules/video/_video.scss b/source/_patterns/02-molecules/video/_video.scss
index 65efe8a1b..60e77ab87 100644
--- a/source/_patterns/02-molecules/video/_video.scss
+++ b/source/_patterns/02-molecules/video/_video.scss
@@ -57,3 +57,36 @@
     }
   }
 }
+
+/* media edit button fix */
+.jcc-video__video-container{
+  @include u-position(relative);
+  @include u-height(0);
+}
+
+.jcc-video__video-container-editor{
+  @include u-display(flex);
+  flex-direction: column;
+  justify-content: space-evenly;
+  gap: 10px;
+  height:auto;
+  padding-bottom:10px !important;
+}
+
+.jcc-video__video-container-editor  > .embed-responsive-item{
+  position: relative;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.jcc-video__video-container > .embed-responsive-item{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/source/_patterns/02-molecules/video/video.twig b/source/_patterns/02-molecules/video/video.twig
index 934814841..1af3b44f5 100644
--- a/source/_patterns/02-molecules/video/video.twig
+++ b/source/_patterns/02-molecules/video/video.twig
@@ -49,20 +49,11 @@
 {% endif %}
 
 {# Video layout classes #}
-{% if video_classes %}
-  {% set video_classes= video.video_classes %}
-{% else %}
-  {% set video_classes= "" %}
-{% endif %}
+{% set video_classes =  video_classes ? video.video_classes : ""%}
+
+{# set classes accrdoing to page : in ckeditor or  display page #}
+{% set added_class =  "media/body/preview" in video.path ? "jcc-video__video-container-editor" : "jcc-video__video-container embed-responsive" %}
 
-{# if in ckeditor #}
-{% if "media/body/preview" in video.path %}
- {% set added_class = "video-container-editor" %}
- {% set style_value = "10px" %}
-{% else %}
- {% set added_class = "video-container embed-responsive" %}
- {% set style_value = ratio * 100 ~ "%;" %}
-{% endif %}
 
 {% set classes = [
   'jcc-video',
@@ -70,7 +61,7 @@
   added_class 
 ]|merge(video.classes|default([])) %}
 
-<div class="{{ classes|join(' ') }}" style= "padding-bottom: {{style_value}}"  >
+<div class="{{ classes|join(' ') }}" style="padding-bottom: {{ ratio * 100 }}%;">
   <iframe class="embed-responsive-item" title="{{ video.provider ~ ' ' ~ 'video player'|t }}"
     width="{{ video.width }}" height="{{ video.height }}"
     src="{{ url }}" data-src="{{ data_url }}"
@@ -80,4 +71,4 @@
   {% if video.cover %}
     <button class="jcc-video__cover" style="background-image: url({{ video.cover }});">{{ "Play video"|t }}</button>
   {% endif %}
-</div>
+</div>
\ No newline at end of file
diff --git a/source/css/_video_embed.scss b/source/css/_video_embed.scss
deleted file mode 100644
index df8134d12..000000000
--- a/source/css/_video_embed.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/* media edit button fix */
-.video-container{
-    position: relative;
-    height: 0;   
-}
-
-.video-container-editor{
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: column;
-    justify-content: space-evenly;
-    gap: 10px;
-    height:auto;
-    padding-bottom:10px !important;
-}
-
-.video-container-editor  > .embed-responsive-item{
-    position: relative;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.video-container > .embed-responsive-item{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
\ No newline at end of file