[apisix-website] branch master updated: fix: the home video overflow on Mobile (#1545)

[gu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

guoqi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 39efc7447c5 fix: the home video overflow on Mobile (#1545)
39efc7447c5 is described below

commit 39efc7447c54af8b91d9d39499e2c46ca29bcaa5
Author: Vishu Verma <vi...@gmail.com>
AuthorDate: Tue Apr 4 09:30:26 2023 +0530

    fix: the home video overflow on Mobile (#1545)
---
 website/src/components/Video.tsx           | 25 ++++++++++++++-----------
 website/src/css/landing-sections/video.css |  6 ++++++
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/website/src/components/Video.tsx b/website/src/components/Video.tsx
index 9dd6eb5c4e8..698689ea2b6 100644
--- a/website/src/components/Video.tsx
+++ b/website/src/components/Video.tsx
@@ -1,14 +1,14 @@
-import type { FC } from 'react';
-import React from 'react';
-import videojs from 'video.js';
-import type { VideoJsPlayerOptions, VideoJsPlayer } from 'video.js';
-import 'video.js/dist/video-js.min.css';
-import '../css/landing-sections/video.css';
+import type { FC } from "react";
+import React from "react";
+import videojs from "video.js";
+import type { VideoJsPlayerOptions, VideoJsPlayer } from "video.js";
+import "video.js/dist/video-js.min.css";
+import "../css/landing-sections/video.css";
 
 export interface VideoProps {
-    options: VideoJsPlayerOptions,
-    // eslint-disable-next-line react/require-default-props
-    onReady?: ((player: VideoJsPlayer) => void) | undefined
+  options: VideoJsPlayerOptions;
+  // eslint-disable-next-line react/require-default-props
+  onReady?: ((player: VideoJsPlayer) => void) | undefined;
 }
 
 export const Video: FC<VideoProps> = (props) => {
@@ -24,7 +24,7 @@ export const Video: FC<VideoProps> = (props) => {
       if (!videoElement) return;
 
       const player = videojs(videoElement, options, () => {
-        videojs.log('player is ready');
+        videojs.log("player is ready");
         onReady?.(player);
       });
       playerRef.current = player;
@@ -49,7 +49,10 @@ export const Video: FC<VideoProps> = (props) => {
   return (
     <div data-vjs-player>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-      <video ref={videoRef} className="video-js vjs-big-play-centered" />
+      <video
+        ref={videoRef}
+        className="video-js vjs-big-play-centered video-player"
+      />
     </div>
   );
 };
diff --git a/website/src/css/landing-sections/video.css b/website/src/css/landing-sections/video.css
index 9f471c8782b..6a7647bbc1d 100644
--- a/website/src/css/landing-sections/video.css
+++ b/website/src/css/landing-sections/video.css
@@ -5,3 +5,9 @@
 .video-js.vjs-paused .vjs-big-play-button {
   display: inline-block !important;
 }
+
+.video-player {
+  aspect-ratio: 16/9;
+  max-width: 100%;
+  height: 100%;
+}