커버에 유튜브 비디오를 넣어 한층 돋보이는 블로그를 만드실 수 있습니다.
초심자도 아래 내용을 읽고 복사 붙여 넣기만 하시면 가능할 정도로 간단한 작업입니다.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!-- Fake Slider --> <div class="video-popup"> <div class="video-popup-closer"></div> </div> <div class="cover-slider"> <div class="m_slider_wrapper"> <div class="videoWrapper"> <div id="player"></div> </div> <div class="fake-bg"></div> <a class="icon-youtube-play fsb"></a> <a class="icon-volume-mute2 ts fsb"></a> <script> var p, t = document.createElement("script"), f = document.getElementsByTagName("script")[0], l = "VideoID"; t.src = "http://www.youtube.com/player_api", f.parentNode.insertBefore(t, f); function onYouTubePlayerAPIReady() { p = new YT.Player("player", { height: "100%", width: "100%", playerVars: { rel: 0, loop: 1, playsinline: 1, playlist: l, controls: 0, showinfo: 0 }, videoId: l, events: { onReady: onPlayerReady } }) } function onPlayerReady(b) { b.target.playVideo(), b.target.mute() } function ytpause() { var b = $(window).scrollTop(), c = $("#main_container").offset().top; b >= c ? p.isMuted() && p.pauseVideo() : (p.playVideo(), $(".video-popup").hasClass("reveal") && p.pauseVideo()) } $(".icon-youtube-play.fsb").click(function() { $(".video-popup").addClass("reveal"), $(".video-popup .video-wrapper").remove(), $(".video-popup").append("<div class='video-wrapper'><iframe width='560' height='315' src='https://youtube.com/embed/" + l + "?rel=0&playsinline=1&autoplay=1' allow='autoplay; encrypted-media' allowfullscreen></iframe></div>"), p.pauseVideo(), $("html").attr("style", "overflow:hidden"), $("#header-wrapper").attr("style", "z-index:1") }), $(".video-popup-closer").click(function() { $(".video-popup .video-wrapper").remove(), $(".video-popup").removeClass("reveal"), p.playVideo(), $("html, #header-wrapper").removeAttr("style") }), $(".ts").click(function() { p.isMuted() ? (p.unMute(), $(this).removeClass("icon-volume-mute2").addClass("icon-volume-high")) : (p.mute(), $(this).removeClass("icon-volume-high").addClass("icon-volume-mute2")) }), $(window).on("resize scroll", function() { ytpause() }); </script> </div> </div> | cs |
html에서 <div id="cover">을 검색해주시고 그 아래에다 붙여 넣어주세요.
다음으로 VideoID만 수정해주시면 됩니다.
주소창에서 ?v= 뒤에 적힌 부분이 비디오의 ID입니다.
VideoID를 삭제하시고 원하시는 비디오의 ID를 붙여 넣어주세요.
비디오가 처음부터 시작하는 걸 원하지 않으시면, rel: 0 아래에 start: 원하는 시작 부분(초), 을 입력하시면 됩니다. 반드시 쉼표까지 작성하셔야 합니다.
ex) start: 35, 라고 입력하시면 35초부터 비디오가 시작합니다.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | /* Fake Slider */ .videoWrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: .5 } @media (min-aspect-ratio:16/9) { .videoWrapper { height: 300%; top: -100% } } @media (max-aspect-ratio:16/9) { .videoWrapper { width: 600%; left: -250%; /*transform: scale(1.155)*/ } } .videoWrapper iframe { position: absolute; top: 0; left: 0%; width: 100%; height: 100%; pointer-events: none; /*transform:scale(1.185)*/ } .fsb { position: fixed; font-size: 1.5rem; bottom: 15px; color: #fff } .fsb.ts { right: 15px; } .fsb.icon-youtube-play { left: 15px; } .fsb:hover { color: #aaa } | cs |
css 제일 아래에 붙여 넣어주세요.
주석 처리된 transform:scale은 비디오가 아래 이미지처럼 화면에 꽉 차지 않을 때 주석 해제 처리하시면 화면에 꽉 차도록 표시됩니다.
'설정 및 활용 > 활용' 카테고리의 다른 글
본문에 첨부한 비디오에 관한 옵션들 (0) | 2019.03.26 |
---|---|
코드 하이라이터 사용하기 (0) | 2019.03.21 |