๊ทธ๋๋ณด๋ ckeditor4 youtube plugin ๋ฐ์ํ ๋๋น ์ฒดํฌ ์์๋ ๋ฏธ์ ์ฉ๋๋ ๊ฒฝ์ฐ CSS์ ์ ์ฉํ๊ธฐ
ํ์ด์ง ์ ๋ณด
๋ณธ๋ฌธ
1. Plugin์ ํตํด์ ์๋์ ๊ฐ์ด ๋ณํ๋์ด์ผ ํ๋
ย

ย
2. ์ ์ฉ์ด ์๋๋ ๊ฒฝ์ฐ ์๋ ์์๋ฅผ ํ์ฉํ์ฌ
ย
ย
.video-container {
ย ย ย ย position: relative;
ย ย ย ย padding-bottom: 56.25%;
ย ย ย ย padding-top: 30px; height: 0; overflow: hidden;
}
ย
.video-container iframe,
.video-container object,
.video-container embed {
ย ย ย ย position: absolute;
ย ย ย ย top: 0;
ย ย ย ย left: 0;
ย ย ย ย width: 100%;
ย ย ย ย height: 100%;
}
ย
์ถ์ฒ:ย https://avexdesigns.com/blog/responsive-youtube-embed
ย
CSS
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
ย
3. ์๋ ๋ด์ฉ ๊ฒ์ํ CSS์ ๋ฃ๊ธฐ
ย
[code]
/* chkeditor4 youtube plugin ์ ํ๋ธ ๋ฐ์ํ ์ ์ฉ */
.youtube-embed-wrapper {
ย ย ย ย ย ย position: relative;
ย ย ย ย ย ย padding-bottom: 56.25%;
ย ย ย ย ย ย padding-top: 30px; height: 0; overflow: hidden;
}
.youtube-embed-wrapper iframe,
.youtube-embed-wrapper object,
.youtube-embed-wrapper embed {
ย ย ย ย ย ย position: absolute;
ย ย ย ย ย ย top: 0;
ย ย ย ย ย ย left: 0;
ย ย ย ย ย ย width: 100%;
ย ย ย ย ย ย height: 100%;
}
[/code]
ย
๋๊ธ๋ชฉ๋ก
๋ฑ๋ก๋ ๋๊ธ์ด ์์ต๋๋ค.
