그누순정용 반응형 미디어 css

얼마전 @웹메이킹 님이 언급한 css 와 예전에 @sinbi 님이 동기부여를 주었던 것까지 포함하여

유튜브, 유튜브쇼츠, 유튜브90도회전, 유튜브270도회전, mp4, mp3 까지의 반응형 태그를 가능하게 하는 기능을 오직 css 만으로 구현하였습니다.

사용방법은

본문이나 댓글의 에디터나 텍스트 옵션을 html 모드로 주고 div 의 class 만 적용하면 되겠습니다.

----------

기존에 반응형으로 사용했던 position 이나 padding 은 사용하지 않고 자바스크립트도 없으므로 말 그대로 거저먹기입니다.

가장 먼저 https://sir.kr/g5_plugin/11459 이 hook 이 깔려 있어야 합니다.

그리고 첨부 css 파일을 본인의 서버에 업로드한 후 view.skin.php 의 적당위치에 아래처럼 css 를 적용해 주세요.

저는 view.tail.skin 의 아무 적당위치에 주는 것을 선호합니다.

<link rel="stylesheet" href="css경로">

개인적으로 캐시 문제 때문에 js 파일이나 css 파일은 아래처럼 쿼리스트링을 붙여줘서 사용하고 있습니다.

<link rel="stylesheet" href="css경로?time=<?php echo date('YmdHis'); ?>">

---------- 

유튜브 일반형 (16:9)
http://wittazzurri.phps.kr/add_board/12

[code]
<div class="yt"><iframe src="https://www.youtube.com/embed?playlist=Km71Rr9K-Bw&loop=1&autoplay=1&vq=highres" allow="autoplay" allowfullscreen></iframe></div>
[/code]

----------

유튜브 쇼츠 (9:16)
http://wittazzurri.phps.kr/add_board/14

[code]
<div class="yts"><iframe src="https://www.youtube.com/embed?playlist=jxh4ltanKOg&loop=1&autoplay=1&vq=highres" allow="autoplay" allowfullscreen></iframe></div>
[/code]

----------

유튜브 일반형 90도 회전
http://wittazzurri.phps.kr/add_board/22

[code]
<div class="yt-90"><iframe src="https://www.youtube.com/embed?playlist=27R3EyTW_MY&loop=1&autoplay=1&vq=highres" allow="autoplay" allowfullscreen></iframe></div>
[/code]

----------

유튜브 일반형 270도 회전
http://wittazzurri.phps.kr/add_board/27

[code]
<div class="yt-270"><iframe src="https://www.youtube.com/embed?playlist=L7zcOcZSoD0&loop=1&autoplay=1&vq=highres" allow="autoplay" allowfullscreen></iframe></div>
[/code]

----------

mp3 기본형
http://wittazzurri.phps.kr/add_board/20

[code]
<div class="mp3"><audio src="mp3경로" autoplay loop controls controlslist="nodownload"></audio></div>
[/code]

----------

mp4 기본형
http://wittazzurri.phps.kr/add_board/16

[code]
<div class="mp4"><video src="mp4경로" autoplay loop controls controlslist="nodownload"></video></div>
[/code]

----------

주의사항은 html 을 입력할 때

<div><iframe></iframe></div>

위와 같이 해야지 아래처럼 하면 부지불식간에 라인사이에 <p></p> 가 끼어들어서 메기나건빵이 될 수 있습니다.

<div>

<iframe></iframe>

</div>

----------

HOOK 함수를 익명함수로 만들었으므로 55832 이상이어야 합니다.

css 를 열어보면 그누순정이 아닌 다른 웹페이지에서 적용하는 것도 금방이란 걸 알 것입니다.^^