14일차 - 부트스트랩4) iframe 영상 삽입

1. 독립 외부 컨텐츠 iframe(유투브) 반응형 처리하기

1-1) iframe 삽입

1-2) iframe 클래스 "position-absolute" 포지션-앱솔루트

• class="position-absolute"
  유투브 영상은 외부 컨텐츠라서, 내가 이래저래 가지고 놀 수 없다. 그러니 포지션 앱솔루트
• width="100%"
  반응형 위해 너비 100%, 높이는 주지 않는다.

1-3) 자식은 absolute -> 엄마가 position-relative

• class="position-relative"
  유투브 영상은 외부 컨텐츠라서, 내가 이래저래 가지고 놀 수 없다.
  그러니 iframe에 포지션 앱솔루트 주고, 엄마 div 생성해 자식을 집어넣음.

엄마 div에 클래스 "position-relative" 지정하고, 부모 div를 조작해서 반응형으로 만듦!

HTML

<div id="youtubeContent" class="position-relative">
	<iframe class="position-absolute" width="100%" src="https://www.youtube.com/embed/rNp39KSg44g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

CSS

<style>

    #youtubeContent{
        height: 0;
        padding-top: 56%; 
        /* height 0이면, 패딩-탑을 '너비(100%)'에 비례한 56% 계산한다 */
    }
    /* 내 엄마한테 사이즈 맡길게 */
    #youtubeContent iframe{
        top: 0; left: 0; width: 100%; height: 100%;
    }

</style>

1-4) 부모 div를 한번 더 생성하여 max-width 지정하기

1-2) 에서 지정한 width="100%"
반응형 위해 너비 100%, 높이는 주지 않는다.

너비 100% 유지해야 함. 근데 반응형 처리도 해야함. 어떡해?

정답) 부모 div.inner를 또 만들어낸 다음, max-width 지정한다! (width는 여전히 "100%")

HTML

<div class="inner">
	<div id="youtubeContent" class="position-relative">
		<iframe class="position-absolute" width="100%" src="https://www.youtube.com/embed/rNp39KSg44g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
	</div>
</div>

CSS

<style>

	/* 새로운 부모 div.inner 생성해서 그 안에 또 넣어주기! */
    .inner{
        max-width: 980px;
        margin: 0 auto;
    }

    #youtubeContent{
        height: 0;
        padding-top: 56%;
    }
    /* 내 엄마한테 사이즈 맡길게 */
    #youtubeContent iframe{
        top: 0; left: 0; width: 100%; height: 100%;
    }

</style>

2. 유투브 영상 옆에 div 텍스트 나란히 삽입

2-1) container-row-col

HTML

• container-xl - "xl 사이즈부터 100% 쓰겠다"
• 내가 틀린 부분
  height-100 d-flex justify-content-center align-items-center px-0 bg-dark flex-column

<div class="container-xl">
	<div class="row">
		<div class="col-md-6 inner px-0">
			<div id="youtubeContent" class="position-relative">
				<iframe class="position-absolute" width="100%" src="https://www.youtube.com/embed/rNp39KSg44g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
			 </div>
		</div>
		<div class="col-md-6 text text-center height-100 d-flex justify-content-center align-items-center px-0 bg-dark flex-column">
			<h3 class="text-white">
            	가고 싶은 내 고향 6시
            </h3>             
		</div>
	</div>        
</div>

3. 모바일 사이즈에서 2,3영상 나란히 붙고, 텍스트 사라짐

모바일 퍼스트

md (768px) 넘어가면서부터 보이는 화면

3-1) 2,3번째 텍스트 div 디폴트값 d-none

• d-none - 2,3번째 텍스트 div 디폴트값
  d-md-block - md 사이즈 넘어가면서부터 나타난다
  d-md-flex - md 사이즈 넘어가면서부터 나타나서 영상 옆으로 가서 붙는다

• col-6 - 2,3번째 iframe col-6으로 변경
  두번째+세번째 영상은 원래도 텍스트div와 2칸씩 자리를 나눠썼는데,
  모바일 사이즈가 돼도(=글자가 사라져도) 영상 나란히 자리하며 2칸을 차지하니
  col-6 '항상' 절반을 차지하겠다!

HTML

    <div class="container-xl">
        <div class="row">
            <div class="col-md-6 inner px-0">
                <div id="youtubeContent" class="position-relative">
                    <iframe class="position-absolute" width="100%" src="https://www.youtube.com/embed/rNp39KSg44g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                </div>
            </div>
            <div class="col-md-6 text text-center height-100 d-flex justify-content-center align-items-center px-0 bg-dark flex-column">
                <h3 class="text-white">
                    가고 싶은 내 고향 6시  
                </h3>             
            </div>
            <div class="col-6 inner px-0">
                <div id="youtubeContent" class="position-relative">
                    <iframe class="position-absolute" width="100%" src="https://www.youtube.com/embed/rNp39KSg44g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                </div>
            </div>
            <div class="d-none d-md-block d-md-flex col-md-6 text text-center height-100 justify-content-center align-items-center px-0 bg-dark flex-column">
                <h3 class="text-white">
                    가고 싶은 내 고향 6시  
                </h3>             
            </div>  
            <div class="col-6 inner px-0">
                <div id="youtubeContent" class="position-relative">
                    <iframe class="position-absolute" width="100%" src="https://www.youtube.com/embed/rNp39KSg44g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                </div>
            </div>
            <div class="d-none d-md-block d-md-flex col-md-6 text text-center height-100 justify-content-center align-items-center px-0 bg-dark flex-column">
                <h3 class="text-white">
                    가고 싶은 내 고향 6시  
                </h3>             
            </div>
        </div>      
    </div>