그누보드 ckeditor4 youtube plugin 반응형 너비 체크 시에도 미적용되는 경우 CSS에 적용하기 > 자유게시판

1. Plugin을 통해서 아래와 같이 변형되어야 하나

2. 적용이 안되는 경우 아래 예시를 활용하여

출처: https://milooy.wordpress.com/2015/08/21/htmlcss-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%B0%98%EC%9D%91%ED%98%95%EC%9C%BC%EB%A1%9C-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0-responsive-youtubeiframe-embed/

.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]