diff --git a/src/app/xtream/detail-view.scss b/src/app/xtream/detail-view.scss
index 8bfe05042..0fcf10b2c 100644
--- a/src/app/xtream/detail-view.scss
+++ b/src/app/xtream/detail-view.scss
@@ -1,5 +1,7 @@
 :host {
     width: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .details {
@@ -87,6 +89,10 @@
     .details {
         padding: 0 10px;
     }
+
+    .youtube-trailer {
+        width: 95% !important;
+    }
 }
 
 .label {
@@ -103,7 +109,7 @@
 
 .youtube-trailer {
     display: flex;
-    flex-direction: column;
-    align-content: center;
     flex-wrap: wrap;
+    align-self: center;
+    width: 650px;
 }
diff --git a/src/app/xtream/vod-details/vod-details.component.html b/src/app/xtream/vod-details/vod-details.component.html
index 0995035fd..863c75bf6 100644
--- a/src/app/xtream/vod-details/vod-details.component.html
+++ b/src/app/xtream/vod-details/vod-details.component.html
@@ -88,8 +88,8 @@
 <div class="youtube-trailer" *ngIf="item.info.youtube_trailer">
     <h3>YouTube Trailer</h3>
     <iframe
-        width="560"
-        height="315"
+        width="100%"
+        height="450"
         [src]="
             'https://www.youtube.com/embed/' + item.info?.youtube_trailer | safe
         "
diff --git a/src/styles.scss b/src/styles.scss
index dd3fec053..10bf0ee17 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -81,6 +81,10 @@ textarea,
         height: calc(100vh - 82px) !important;
     }
 
+    app-web-player-view > app-vjs-player > .video-js {
+        height: 100% !important;
+    }
+
     #video-player {
         width: 100%;
         height: calc(100vh - 80px) !important;
@@ -98,6 +102,16 @@ textarea,
     .scroll-viewport {
         min-height: calc(100vh - 210px) !important;
     }
+
+    .scroll-viewport-portals {
+        min-height: calc(100vh - 160px) !important;
+        overflow-x: hidden !important;
+    }
+}
+
+.scroll-viewport-portals {
+    min-height: calc(100vh - 160px) !important;
+    overflow-x: hidden !important;
 }
 
 .mat-drawer-inner-container {