Merge pull request #4 from Iinpark/mobile-adapt

fix: верстка в ютуб iframe
Iinpark · Jul 26, 2023 · ea6e1aa · ea6e1aa
2 parents c127435 + 89d5486
commit ea6e1aa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 53 deletions.
diff --git a/src/shared/ui/Media/YTIframe.scss b/src/shared/ui/Media/YTIframe.scss
@@ -0,0 +1,6 @@
+.yt-iframe {
+ height: auto;
+ width: 100%;
+ aspect-ratio: 16/9;
+ max-width: 600px;
+}
diff --git a/src/shared/ui/Media/YTIframe.tsx b/src/shared/ui/Media/YTIframe.tsx
@@ -1,18 +1,22 @@
+import React from 'react';
+import './YTIframe.scss';
+
 type YTIframeProps = {
  src: string;
  height?: number | string;
  width?: number | string;
 };
 const YTIframe = (props: YTIframeProps) => {
- const { src = '', height = 315, width = 560 } = props;
+ const { src = '', height = '', width = '' } = props;
  const vidId = src.split('v=')[1];
  if (!src) return <div></div>;
 
  return (
  <iframe
+ className='yt-iframe'
  width={width}
  height={height}
- src={`https://www.youtube.com/embed/${vidId}`}
+ src={`https://www.youtube.com/embed/${vidId}?autoplay=1`}
  title='YouTube video player'
  frameborder='0'
  allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'

diff --git a/src/widgets/LaunchesList/Index.tsx b/src/widgets/LaunchesList/Index.tsx