์ ๋์ฝ ์คํจ ๋ด์๋ํฐ์์ ์ ํ๋ธ ์์ ๋น์จ ๋ง์ถ๊ธฐ
2020.05.10
๊ธฐ์กด์๋ ๊ธ ์์ฑ ์๋ํฐ์ HTML ๋ชจ๋์ ์์์ ์์ค์ฝ๋๋ฅผ ๋ถ์ฌ๋ฃ๊ณ , ํด๋น iframe ํ๊ทธ๋ฅผ <div class="youtube"></div>๋ก ๊ฐ์ธ์ฃผ๋ ๊ท์ฐฎ์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์๋๋ฐ์.
์ด์ ์๋ํฐ์ ๊ธฐ๋ณธ ๋ชจ๋์ ์์์ ์ฃผ์๋ฅผ ์ ๋ ฅํ๊ณ ์ํฐ๋ฅผ ์น๋ฉด(์ด๋ ๋ฉ์ถฐ์๋ ์ด๋ฏธ์ง ๊ฐ์ iframe์ด ์์ฑ๋ฉ๋๋ค) ์๋์ผ๋ก ์์ ํฌ๊ธฐ, ๋น์จ์ ๋ง์ถฐ์ค ์ ์์ต๋๋ค. ์๋์ ์ฝ๋๋ฅผ CSS ํธ์ง์ฐฝ์ ๋ฃ์ด์ฃผ์๋ฉด ๋ฉ๋๋ค :-)
๋จ ๋ด์๋ํฐ์์๋ง ์๋ํ๋ ์ ์ฐธ๊ณ ๋ฐ๋๋๋ค!
figure[data-ke-type="video"]{position: relative; width: 100%; padding-bottom: 56.25%;}
figure[data-ke-type="video"] iframe{position: absolute; left:0; width: 100%; height: 100%;}