티스토리 뷰

블로그 꾸미기

블로그 방문자를 사로잡을 동영상 배너 만들기

cocoder 2024. 4. 22. 14:46
728x90

 

안녕하세요 cocoder 입니다 오늘은 동영상으로 블로그 배너를 꾸미는 방법에 대해서 소개를 해볼까 합니다.

 

우선 배너로 사용할 동영상을 하나 만들어야겠죠?

 

https://imgur.com/

 

Imgur: The magic of the Internet

Imgur is the easiest way to discover and enjoy the magic of the Internet. It’s where you’ll find the funniest, most informative and inspiring images, memes, GIFs, and visual stories served up in an endless stream of bite-sized fun. Powered by a passion

imgur.com

ucc 영상같은걸 제작해서 공유하는 사이트인데 이 사이트에 있는 영상들을 그대로 사용하셔도 되고 여기에 동영상을 업로드 해서 사용해도 됩니다.

 

쉽게 설명드리면 영상 호스팅사이트 입니다.

 

영상 올리기

'New post' 버튼을 클릭해서 영상을 올려봅시다.

영상올리시는 건 다들 잘 하실거라 생각해서 영상올리는 설명은 생략하겠습니다. ^^

 

이런식으로 영상이 올라갈텐데 F12 개발자 도구를 엽시다!

 

동그라미로 표시된 버튼 클릭하고 영상이 재생되고있는 박스쪽에 마우스를 가져가 다시 클릭해봅시다.!

 

요런식으로 비디오 태그가 잡히는게 보이시죠?

왼쪽의 화살표를 한번클릭하여 태그안으로 들어간뒤 source 태그 안의 src 주소를 복사합니다.

 

저는 링크주소가 이렇게나왔네요.

https://i.imgur.com/Stf6KqW.mp4

 

    <video muted="" autoplay="" loop="" style="
        display: block;
        width: 60%;
        margin: auto;">
        <source src="주소" type="video/mp4">
    </video>

 

주소 안에 복사한 링크를 넣어줍시다.

 

    <video muted="" autoplay="" loop="" style="
        display: block;
        width: 60%;
        margin: auto;">
        <source src="https://i.imgur.com/Stf6KqW.mp4" type="video/mp4">
    </video>

 

이제 이 태그를 블로그 안에 넣으러 가봅시다 ~~

 

 

 

티스토리 관리페이지 '꾸미기 > 스킨편집' 후에 html 편집 버튼을 클릭합니다.

 

저는 <body> 태그 바로 밑에 붙여넣기를 하겠습니다.

 

 

요런식으로 추가했고 미리보기를 통해 잘 나오는것같아서 적용했습니다.

 

영상의 가로 크기를 조절하시려면 width: 60% 이부분을 조절하시면 됩니다. 0~100% 까지 조절 가능합니다.

 

 

감사합니다.!! 🤗🤗

728x90

'블로그 꾸미기' 카테고리의 다른 글

누르고 싶은 구독버튼 만들기  (4) 2024.03.20
블로그 상단 배너에 귀여운 움직이 텍스트로 꾸미기  (2) 2024.03.20
드래그로 선택된 텍스트 기본 색상 변경  (4) 2024.03.19
스크롤바 내 맘대로 변경하기  (4) 2024.03.19
티스토리 움직이는 이미지 슬라이더 배너 만들기  (7) 2024.03.18