카카오 브라우저에서 연 페이지에
세로 유투브 영상이 있는 경우,
갤럭시 기종에서 전체 페이지로 볼때
아래와 같이 가로로 표시됩니다.
아이폰 혹은 다른 브라우저로 볼때는 세로 영상을 잘 인식하여
전체 사이즈로 확인했을때 잘 인식하구요.
유투브는 임배드 형식으로 가져왔고
관련 코드는 아래와 같습니다.
수정할 수 있는 방법이 있다면, 알려주세요 
const YoutubeBox: React.FC<Props> = ({ url }) => {
const bodyRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const resize = () => {
if (bodyRef.current) {
const h = (bodyRef.current.clientWidth * 9) / 16;
bodyRef.current.style.height = `${h}px`;
}
};
resize();
window.addEventListener('resize', resize);
return () => {
window.removeEventListener('resize', resize);
};
}, [url]);
const changeUrl = (url: string) => {
if (!url) {
return '';
}
const isYoutubeUrl = url.includes('youtube.com') || url.includes('youtu.be');
if (isYoutubeUrl) {
let videoId = '';
let startTime = '';
if (url.includes('youtube.com')) {
const urlObj = new URL(url);
if (url.includes('v=')) {
videoId = urlObj.searchParams.get('v') || '';
startTime = urlObj.searchParams.get('t') || '';
} else if (url.includes('shorts')) {
const paths = urlObj.pathname.split('/');
videoId = paths[paths.length - 1];
}
} else if (url.includes('youtu.be')) {
const urlObj = new URL(url);
videoId = urlObj.pathname.split('/')[1];
startTime = urlObj.searchParams.get('t') || '';
}
if (videoId) {
let embedUrl = `https://www.youtube.com/embed/${videoId}`;
if (startTime) {
embedUrl += `?start=${parseInt(startTime, 10)}`;
}
return embedUrl;
}
}
return '';
};
const changedUrl = changeUrl(url);
if (!changedUrl) {
return <></>;
}
return (
<YoutubeBoxBlock ref={bodyRef}>
<iframe
width="100%"
height="100%"
src={changedUrl}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</YoutubeBoxBlock>
);
};
export default YoutubeBox;
const YoutubeBoxBlock = styled.div`
iframe {
border: none;
}
`;