갤러리 게시판 유튜브 썸네일 관련하여 질문드립니다.
본문
안녕하세요!
갤러리 게시판에서 유튜브 링크를 첨부했을때, 게시글을 클릭하면 해당 유튜브로 이동하는
기능을 업데이트 했는데요 좀 더 업그레이드가 될까 해서 질문드립니다..
참고한 게시글은 해당 게시글입니다..
https://sir.kr/g5_tip/19996
유튜브 영상을 게시판에서 html 형식으로 변경하여
iframe로 넣어야 썸네일이 노출이 되고, 썸네일을 클릭했을때 view로 넘어가보이는것같은데요
제가 업데이트 하고싶은 기능은
따로 html 형식으로 iframe를 넣지않고
첨부링크쪽에 유튜브 링크를 넣으면 썸네일이 노출되고 target="_blank" 로 새창으로 띄우는 업데이트를 진행하고자했으나
도저히 어떻게 하면 좋을지 감이 잡히지 않아,
해당 기능을 추가해서 게시글을 클릭하여 링크를 강제로 이동하게 만들려했더니 유튜브 썸네일이 안나오는 문제가 발생해서요..
스크립트에서 작업되어있는 $list[$i]['wr_content'] 이부분과 a태그에 들어간 <?php echo $list[$i]['href'] ?> 이부분이 <?php echo $list[$i]['wr_link1'] ?>이렇게 달라져서 인가 싶은데 어떻게 수정하면 좋을까싶어 질문드립니다.
제가 게시글을 더 못찾은것일수도있어서 지식 나눔 부탁드립니다.
답변 2
정규식으로 링크내의 유튜브 영상 아이디를 추출하여 썸네일이 보여지게 해야 할 것입니다.
안녕하세요!
정규식으로 작업하니 썸네일이 제대로 노출됩니다. 감사합니다!
https://sir.kr/g5_tip/19996 의 코드를 아래처럼 바꿉니다.
pc
<script>
<?php for ($i=0; $i<count($list); $i++) echo "ytThumbnail_".$i." = '".substr(explode('https://www.youtube.com/embed/', $list[$i]['wr_link1'])[1], 0, 11)."';\n"; ?>
for (i = 0; i < <?php echo $i; ?>; i++) {
if (this["ytThumbnail_" + i] !== "") {
document.querySelectorAll("#bo_gall .gall_img a")[i].innerHTML = "<img src='https://img.youtube.com/vi/" + this["ytThumbnail_" + i] + "/mqdefault.jpg'>";
document.querySelectorAll("#bo_gall .gall_img a")[i].target = "_blank";
}
}
</script>
----------
mobile
<script>
<?php for ($i=0; $i<count($list); $i++) echo "ytThumbnail_".$i." = '".substr(explode('https://www.youtube.com/embed/', $list[$i]['wr_link1'])[1], 0, 11)."';\n"; ?>
for (i = 0; i < <?php echo $i; ?>; i++) {
if (this["ytThumbnail_" + i] !== "") {
document.querySelectorAll("#bo_gall .gall_li_wr .gall_img")[i].innerHTML = "<img src='https://img.youtube.com/vi/" + this["ytThumbnail_" + i] + "/mqdefault.jpg'>";
document.querySelectorAll("#bo_gall .gall_li_wr .gall_img")[i].target = "_blank";
}
}
</script>
안녕하세요! 댓글 확인이 늦었습니다!
공유주신 코드를 업데이트하여 실 서버에 적용했는데요~
<script> 태그 안의 PHP 코드가 정상적으로 실행되지 않아서 브라우저에서
< 문자가 포함된 채로 인식되는 문제가 생기더라구요
https://lpla.tistory.com/82
해당 부분과 같이 적용하면 되는건지 시도해보았으나
썸네일 부분이 적용이 안되더라구요..
제가 실력이 부족한것같아..
수정해주신 부분을 적용을 못하네요.. 답변 달아주셔서 감사합니다!
