유튜브 플로팅 팝업창에 게시글의 제목과 내용 추출
본문
유명한 플로팅 팝업 (유튜브)스킨을 활용하여 사용중에 있습니다.
그런데 문제가 썸네일을 클릭하여, 플로팅팝업으로 영상이 뜨는데, 영상과 함께, 하단부나 아무 위치에 글을올린 게시판의 제목과 내용도 함께 출력되게 하고싶은데, 참고할만한 자료나, 자문을 좀 구할 수 있을까요 ㅠㅠ?
<!-- 팝업 레이어 -->
<div class="video-popup">
<div class="video-popup-closer" id="video-popup-closer2"></div>
<?php if ($list[$i]['ca_name']) { ?><span style="color:#fff; font-size:11px; padding:bottom:5px;"><?php echo $list[$i]['ca_name']; ?></span><h4><?php echo $list[$i]['subject'] ?></h4><?php } ?>
</div>
<!-- 팝업 레이어 -->
팝업 레이어쪽에 이렇게 했는데, 출력이 되질 않아서요 ㅠ
답변 1
<script>
$(".popyt").click(function() {
$(".video-popup").addClass("reveal"),
$(".video-popup .video-wrapper").remove(),
$(".video-popup").append("<div class='video-wrapper'><div class='video-wrapper_div2'><div class='video-wrapper_div'><iframe width='1000' height='563' src='https://youtube.com/embed/" + $(this).data("video") + "?rel=0&playsinline=1&autoplay=1' allow='accelerometer; gyroscope; picture-in-picture; encrypted-media' allowfullscreen style='position: absolute; width:100%; height:100%;'></iframe></div></div></div>")
})
</script>
이쪽 스크립트에서 해당글의 제목 추가해주는 태그를 넣어주시면 되겠네요
<!-- 스크립트 -->
<script>
$(".popyt").click(function() {
$(".video-popup").addClass("reveal"),
$(".video-popup .video-wrapper").remove(),
$(".video-popup").append("<div class='video-wrapper'><div class='video-wrapper_div2'><div class='video-wrapper_div'><iframe width='1000' height='563' src='https://youtube.com/embed/" + $(this).data("video") + "?rel=0&playsinline=1&autoplay=0' allow='accelerometer; gyroscope; picture-in-picture; encrypted-media' allowfullscreen style='position: absolute; width:50%; height:50%;'></iframe></div></div></div><h4><?php echo $list[$i]['subject'] ?></h4>")
});
</script>
이렇게 했는데 안되어서요 ㅠㅠ
<h4>" + $(this).data("video") + "</h4>
이런식으로 하면 유튜브 뒷도메인이 출력이 되는데, 그에 해당하는 게시물의 제목에 대한 조건을 어떻게 넣어야할지가 감이안잡혀서요 ㅠ
php언어로 하면안되고
스크립트로 짜셔야됩니다
해당 스크립트가 동적으로 값을 가져가기때문에 php로 넣어주면 안되요
혹시 참고할만한 자료가 있을까요 ㅠ?
$(this).find("h4").html() 로 추가해보세요
아... 해당 데이터의 동적 태그를 가져오는 개념일까요..? 혹시 제가 검색하면서 알아본건데 ,
https://www.nextree.co.kr/p10155/
여기내용이 참조가 될까요?
문제점이 한가지 있는데 ㅠㅠ
링크는 동적으로 불러오지 못하는걸로 알고있는데,
$("a.href_con").html()
a태그자체를 불러오려면 어떻게 해야할까요? a태그 안에있는 텍스트만 불러와지는 상태여서요 ㅠ
<a href="<?php echo $list[$i]['href'] ?>" class="href_con">자세히보기</a>
본문에는 이렇게 삽입해놓은 상태입니다.
$(this).find("a")로 가져와보세요
