iframe
자바스크립트까지 끌고 와서 넣는 거(ex.카카오맵) 외부 api 연동
이런 부분을 이용해서 화면 구성하는 거 mash up
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립 외부 컨텐츠 iframe 반응형 처리하기_youtube</title>
<!-- Bootstrap v4.6.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style>
.inner {
max-width: 980px;
margin: 0 auto;
}
#youtubeContent {
height: 0;
padding-top: 56%;
}
</style>
height를 없애고padding등을 넣어버리면 그 퍼센테이지를 너비를 기준으로 계산하게 됨
영상 너비가 원래 화면의 56%
=>height: 56vw;
<style>
#youtubeContent iframe {
top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;
}
</style>
</head>
<body>
<div class="inner">
<div id="youtubeContent" class="position-relative">
<iframe class="position-absolute" width="100%" src="https://www.youtube.com/embed/js1CtxSY38I?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>iframe에
absolute넣고 #youtubeContent에relative넣어서
absolute가relative에 들러붙게 한다!
div 조정으로 iframe 크기 조절 가능
이것만 알면 나도 iframe 반응형 크기 바꿀 수 있다~~~
아자아자~~~><
