블로그에 동영상 배경 코드 적용하는 방법

최근 웹사이트와 블로그는 동적인 웹 디자인을 통해 사용자 경험을 최우선으로 고려하는 추세입니다. 현재는 글을 읽기보다는 유튜브와 같은 영상 콘텐츠를 통해 좀 더 정보에 접근하려는 경향이 있습니다. 이러한 흐름에서 동영상을 활용하여 전체 화면 배경으로 사용하는 것은 그중 하나의 방법입니다.
블로그에서 동영상 전체 배경화면으로 사용하는 것은 비주얼적인 면에서 큰 영향을 미칠 수 있으며, 방문자에게 보다 몰입감 있는 환경을 제공합니다. 특히, 동영상 배경은 콘텐츠에 대한 관심을 끌고, 시각적으로 풍성한 느낌을 줄 수 있습니다.

그러나 이러한 동영상 배경화면을 전체화면으로 구현하는 과정에서 고려해야 할 사항들이 있습니다. 특히 모바일 디바이스에서도 최적화된 사용자 경험을 제공할 수 있도록 해야 하며, 접근성을 보장하는 것도 매우 중요합니다.

모바일과 데스크탑에 최적화된 동영상 배경 설정 방법

동영상 배경화면의 사용자 접근성

동영상 배경화면은 시각적인 효과를 주지만, 그로 인해 일부 사용자에게는 불편할 수 있습니다. 예를 들어, 시각 장애가 있는 사용자는 동영상 배경을 제대로 인식할 수 없을 수 있으며, 동영상이 자동으로 재생되는 방식은 집중을 방해할 수 있습니다. 이 문제를 해결하기 위해 접근성을 고려한 디자인을 적용하는 것이 필수적입니다.

접근성을 고려한 동영상 배경화면 설정

1. 자동 재생을 제한하거나 음소거 처리: 자동 재생되는 동영상은 사용자에게 불편함을 줄 수 있으므로 자동 재생을 제한하고, 음소거를 처리하는 것이 좋습니다. 이는 특히 시각 및 청각 장애가 있는 사용자에게 도움이 됩니다.
2. 대체 텍스트 및 설명 추가: 동영상 배경에 대한 설명이나 대체 텍스트를 제공하여 동영상을 시각적으로 인식할 수 없는 사용자에게도 콘텐츠를 알릴 수 있습니다. 예를 들어, 텍스트를 삽입하여 동영상이 어떤 내용을 담고 있는지 알리는 방법이 있습니다.
3. 동영상의 제어 제공: 사용자에게 동영상의 재생/정지와 같은 제어 기능을 제공하여 동영상을 스킵하거나 일시 정지할 수 있는 선택지를 주는 것이 좋습니다.

SEO 최적화
동영상 배경화면의 장점

동영상 배경화면을 블로그에 사용하는 것만으로도 SEO에도 긍정적인 영향을 미칠 수 있습니다. 사용자 만족도를 증가시켜 체류시간을 늘리수 있수 있다면 로딩지연이 일부 발생해도 긍정적일수 있습니다. 그러나 이를 효과적으로 사용하기 위해서는 몇 가지 중요한 최적화 전략을 따라야 합니다.

SEO에 유리한 동영상 배경화면 사용법

1. 동영상의 제목과 설명을 활용한 키워드 최적화: 동영상 배경을 사용하는 경우, 해당 동영상에 관련된 키워드를 활용하여 동영상의 제목과 설명을 작성해야 합니다. 이를 통해 검색 엔진이 동영상의 내용을 파악하고, 사용자에게 더 적합한 정보를 제공할 수 있습니다.
2. 동영상 메타데이터 활용: alt 태그나 title 속성 등을 활용하여 동영상에 대한 추가 정보를 제공하면, 검색 엔진에서 해당 동영상을 더 잘 인식할 수 있습니다. 이 정보를 통해 동영상이 블로그 콘텐츠에 어떻게 관련되는지 설명할 수 있습니다.
3. 페이지 로딩 속도 최적화: 동영상을 사용하면 페이지 로딩 속도가 느려질 수 있습니다. 이를 해결하려면 동영상의 해상도를 적절히 조정하여 페이지 속도를 최적화해야 합니다. 페이지 로딩 속도는 SEO에서 중요한 요소 중 하나입니다.

블로그에 동영상 배경화면 전체화면 적용 방법

다음은 블로그에 동영상 배경화면을 전체화면으로 구현하는 방법입니다. 이 코드는 유튜브 영상을 배경으로 설정하여 사용자가 화면 크기에 맞게 동영상이 자동으로 조정되도록 합니다.

코드 사용 방법 – 동영상 배경 적용하기

웹사이트 또는 블로그에서 동영상을 배경으로 활용하려면 아래 코드를 적용하면 됩니다.

1. 코드 삽입: 동영상을 배경으로 설정할 페이지의 HTML 파일에 아래 코드를 추가합니다.
2. 유튜브 영상 변경: 유튜브 경로 부분을 원하는 동영상 URL로 수정합니다.
3. 텍스트 수정: 배경 위에 표시될 텍스트를 블로그 또는 사이트의 컨셉에 맞게 변경합니다.

<script>
window.addEventListener("DOMContentLoaded", () => {
if (window.location.href !== "https://everydayhub.tistory.com/362") return;
if (sessionStorage.getItem('videoShown') === 'true') return;

let c = document.getElementById(“container”);
if (c) c.style.display = “none”;

let v = document.createElement(“div”);
Object.assign(v.style, {
position: “fixed”,
top: 0,
left: 0,
width: “100%”,
height: “100vh”,
zIndex: 9999,
background: “rgba(0, 0, 0, 0.7)”,
overflow: “hidden”
});

let i = document.createElement(“iframe”);
i.src = “https://www.youtube.com/embed/kddVKHFSUAw?autoplay=1&mute=1&loop=1&playlist=kddVKHFSUAw&modestbranding=1&controls=0&showinfo=0&rel=0”;
i.setAttribute(“aria-label”, “FPV 드론 동영상”);
Object.assign(i.style, {
position: “absolute”,
top: “50%”,
left: “50%”,
transform: “translate(-50%, -50%)”,
border: 0,
pointerEvents: “none”,
maxWidth: “none”
});

function resizeVideo() {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
const videoAspectRatio = 16 / 9;

if (screenWidth / screenHeight > videoAspectRatio) {
i.style.width = `$screenWidth}px`;
i.style.height = `$screenWidth / videoAspectRatio}px`;
} else {
i.style.width = `$screenHeight * videoAspectRatio}px`;
i.style.height = `$screenHeight}px`;
}
}

resizeVideo();
window.addEventListener(“resize”, resizeVideo);

let b = document.createElement(“button”);
b.innerText = “동영상 전체 배경화면 글 보기”;
Object.assign(b.style, {
position: “absolute”,
top: “50%”,
left: “50%”,
transform: “translate(-50%, -50%)”,
padding: “10px 20px”,
color: “black”,
border: “2px solid black”,
fontSize: “1rem”,
cursor: “pointer”,
zIndex: 10001,
fontWeight: “bold”,
background: “white”
});

b.addEventListener(“click”, () => {
if (c) c.style.display = “”;
v.remove();
Object.assign(document.body.style, { margin: “”, overflow: “” });
window.removeEventListener(“resize”, resizeVideo);
sessionStorage.setItem(‘videoShown’, ‘true’);
window.location.reload();
});

v.append(i, b);
document.body.appendChild(v);
Object.assign(document.body.style, { margin: 0, overflow: “hidden” });
});
</script>

코드 설명

동영상 배경화면 생성

• div 요소를 사용하여 동영상을 배경화면으로 설정합니다.
• iframe을 사용하여 유튜브 동영상을 불러오고, 화면을 꽉 채웁니다.

동영상 크기 조정

• resizeVideo() 함수는 화면 크기에 맞게 동영상 크기를 조정합니다. 화면 비율에 맞게 동영상을 적절하게 크기를 조정하여 모바일 및 데스크탑에서 최적화된 비율로 표시됩니다.

로고 및 텍스트 추가

• 동영상 중앙에 텍스트를 추가하여 브랜드나 블로그 이름을 강조합니다. 이를 통해 방문자는 메인 콘텐츠로 이동할수 있습니다.

10초 후 원래 콘텐츠 복원

• 설정된 시간(5초) 후에 동영상 배경을 제거하고 메인 콘텐츠로 되돌립니다.

전체화면 동영상 배경으로 접근성 향상하기

동영상 배경화면을 블로그에 적용하는 것은 매우 효과적인 방법으로 방문자의 시각적 관심을 끌고 몰입감을 높여줄 수 있습니다. 하지만 접근성과 SEO를 고려하여 적절하게 구현해야 하며, 이 코드는 모바일과 데스크탑 환경 모두에 최적화된 동영상 배경을 제공합니다.이 코드를 사용하여 블로그의 디자인을 현대적이고 직관적으로 개선할 수 있으며, 사용자 경험을 높일 수 있습니다.