4. 앱 화면에 유튜브 영상 넣기
section을 통해서 텍스트를 입력할 수 있고, object를 사용해서 이미지와 영상, 사운드를 넣을 수 있습니다. 이번에는 앱 화면에 유튜브 영상을 넣어보겠습니다.
1. [catalog_home.sbml] 파일을 클릭합니다.
2. =begin catalog 와 =end catalog 사이에 =object youtube: video-id="유튜브 영상 주소" 를 입력합니다. 샘플 영상으로 잼킷 설치 가이드 영상 주소를 입력해보겠습니다. 그리고 width=1pw, height=1pw*9/16 영상의 가로 사이즈와 세로 사이즈를 입력해줍니다.
=begin catalog
=begin welcome
Hello, World!
=end welcome
=object youtube: video-id="CkZde3a1_5M", width=1pw, height=1pw*9/16
=end catalog
# 유튜브 영상 주소 확인하는 방법
유튜브 영상 주소 창에서 마지막에 밑줄 친 부분이 해당 영상의 주소입니다.
https://www.youtube.com/watch?v=CkZde3a1_5M
3. 파일을 저장하면 화면에 유튜브 영상이 들어가있습니다.
4. object 의 스타일도 sbss에 지정할 수 있습니다. [catalog_home.sbml] 파일에서 width=1pw, height=1pw*9/16 사이즈를 지정한 부분을 삭제하고 style=youtube_test 를 입력합니다.
-
.
5. [catalog_home.sbss] 를 클릭합니다. #youtube_test 라는 클래스를 만들어서 아래와 같이 가로 세로 스타일을 입력해줍니다. #youtube_test: width=1pw, height=1pw*9/16
그리고 자동으로 플레이 되도록 autoplay=yes 를 입력합니다.,
영상이 화면의 가운데에 위치하도록 위에 여백값 margin-top=200dp 를 입력합니다.
import themes.sbss
/catalog: page-background-color=#FC3, text-color=#F00
#youtube_test: width=1pw, height=1pw*9/16, autoplay=yes, margin-top=200dp
