반응형 iframe 만들기

반응형 iframe으로 제작

홈페이지를 삽입 하는 방식

<style>

.countsort{

position : relative;

width : 100%;

height : 0;

padding-bottom : 56.25%;

}

.video{

position : absolute;

top : 0;

left : 0;

width : 100%;

height : 100%;

}

</style>

<div class="countsort">

<iframe src="https://www.cs.usfca.edu/~galles/visualization/CountingSort.html" frameborder="0" allowfullscreen="" class="video"></iframe>

</div><p><br /></p>

반응형 iframe으로 제작

동영상을 삽입하는 방식

<style>

.countsort{

position : relative;

width : 100%;

height : 0;

padding-bottom : 56.25%;

}

.video{

position : absolute;

top : 0;

left : 0;

width : 100%;

height : 100%;

}

</style>

<div class="countsort">

<iframe src="https://www.youtube.com/embed/8k5RUK6M5AU" frameborder="0" allowfullscreen="" class="video"></iframe>

</div><p><br /></p>

Youtube에서 기본적으로 제공하는 Iframe (반응형은 아니다.)

<iframe width="560" height="315" src="https://www.youtube.com/embed/8k5RUK6M5AU" frameborder="0" allowfullscreen></iframe>