워드프레스 유튜브 embed iframe 전부 풀자동 반응형 세팅

구텐베르크 블록 에디터로 넣어도 어딘가 오류나고, 자동조절(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 숫자 부분을 원하는대로 바꾸면 됨 끝.