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

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

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

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

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

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

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

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

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를 고려하여 적절하게 구현해야 하며, 이 코드는 모바일과 데스크탑 환경 모두에 최적화된 동영상 배경을 제공합니다.이 코드를 사용하여 블로그의 디자인을 현대적이고 직관적으로 개선할 수 있으며, 사용자 경험을 높일 수 있습니다.