구텐베르크 블록 에디터로 넣어도 어딘가 오류나고, 자동조절(Resize for smaller devices) 기능 켜도 안되고, 검색해도 하나하나 div
로 래핑하라 하질않나 그걸 어느세월에 하고있나.
심지어 래핑하는것도 까먹거나 중간에 이름 바꾸면 망함.
그딴거 없이 이거보고 모든환경 모든상황 모든 iframe
모든 embed
풀자동 풀세팅 ㄱ
1. functions.php
에 ↓ 코드 삽입(방법은 맘대로)
function vnmFunctionality_embedWrapper($html, $url, $attr, $post_id) {
return '<div class="embedwrapper">' . $html . '</div>';
}
add_filter('embed_oembed_html', 'vnmFunctionality_embedWrapper', 10, 4);
코드설명: 모든 embed
를 워드프레스 필터를 사용해 ‘embedwrapper
‘ 라는 div
로 감싸주게 만듦.
이로서 모든 embed
에 자동 래핑됨, 귀찮게 일일히 안 해도 됨.
2. CSS 에 ↓ 코드 삽입
.embedwrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.embedwrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
그렇게 1번의 필터를 통해 모든 embed
에 래핑된 embedwrapper
를 가장 잘 먹히고 유명한 embed CSS 래핑 트릭을 사용해 16:9 반응형으로 만듦 끝.
이제 모든 embed iframe
이 반응형으로 어떤 환경이든 화면 폭에 맞춰서 16:9 비율로 자동 크기조절 돼서 알아서 나온다. 아 개편하다.
+ 추가 핵
이렇게 완성되면 그냥 쓰면 되는데, 본문 크기가 넓은 사람한테는 데스크탑에서 전체 넓이로 나오니까 너무 클 수 있음.
이때 래핑을 2단으로 해줘서 다 똑같은데 데스크탑에서만 최대 크기를 정할 수 있음
1. functions.php
에 ↓ 코드 삽입
function vnmFunctionality_embedWrapper($html, $url, $attr, $post_id) {
return '<div class="embedwrapper-wrapper"><div class="embedwrapper">' . $html . '</div></div>';
}
add_filter('embed_oembed_html', 'vnmFunctionality_embedWrapper', 10, 4);
2. CSS 에 ↓ 코드 삽입
.embedwrapper-wrapper{max-width:600px;margin:0 auto;}
.embedwrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.embedwrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
위에 버전이랑 다 똑같은데 embedwrapper-wrapper
를 한번 더 덮어서 크기조절하고 중앙 자동정렬 하는것임.
최대 크기를 정하려면 2번의 css 코드의 빨간색 600 숫자 부분을 원하는대로 바꾸면 됨 끝.