--updated--

Author: polodev

package-lock.json

@@ -1,11 +1,11 @@
 function scroll_video_wrapper() {
   var $video_wrapper = $('.video_wrapper');
   $video_wrapper.each(function () {
-    var $video_wrapper_offset = $video_wrapper.offset().top;
+    var $video_wrapper_offset = $video_wrapper.offset().top - 5;
     $("html, body").animate({ scrollTop: $video_wrapper_offset }, 1000);
   });
 }
 
 jQuery(document).ready(function($) {
 	scroll_video_wrapper();
-});
+});

public/js/app.js

@@ -16,7 +16,15 @@
       next_url: {
         type: String,
         default: null
+      },
+      video_width: {
+        type: Number,
+        // default: function() {
+        //   return $('#video-player-card').width();
+        // }
+        default: $('#video-player-card').width(),
       }
+
     },
     data() {
       return {
@@ -26,7 +34,8 @@
           muted: false,
           language: 'en',
           preload: 'auto',
-          width: $('#video-player-card').width() || 600,
+          // width: $('#video-player-card').width() || 600,
+          width: this.video_width,
           playbackRates: [0.7, 1.0, 1.5, 2.0, 2.5, 3.0],
           sources: [
             {
@@ -39,4 +48,4 @@
       };
     }
   };
-</script>
+</script>

public/js/main.js

@@ -17,6 +17,7 @@
 		<div class="d-flex justify-content-center">
       @if ($current_video->file_type == 'video')
         <my-video
+          video_width2="800"
           video_source="{{$current_render_link}}"
           @if($next)
             next_url="{{ route('video.show', $next) }}"