공지사항

하얀하늘
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
웹페이지 링크 https://cross.hothoney.co.kr/?module=fil...le_srl=349

 

 

*관련 동영상 

 

☆  글 상위 웹페이지 링크에 유투브 공유글 작성시 필요한 소스 코드를 올렸습니다 다운 받으셔서 사용 하십시요 

 

안녕 하십니까 성도 여러분 

여러분들이 교회게시판에 글쓰기를 하시다 보면은 아무래도 유튜브 동영상을 삽입 하시게 되는 경우가 많이 계실겁니다.

이에 관련된 글이니 게시판에 글쓰기 하실분들은 참고 하시기 바랍니다.

 

여러분이 사용하시는 교회 홈페이지는 XpressEngine XpressEngine.png 이라는 사이트 빌드 코어를 사용하여 제작 됬습니다.

 

그런데 이곳에 사용하는 스킨에 유튜브 영상의 아이프레임(iframe)코드를 사용하여 유튜브 영상을 공유하게 되는데 이소스를 그대로 사용시

모바일(태블릿) 디바이스의 해상도 에서 홈페이지의 글을 보게될경우 가로 사이즈가 스킨의 영역을 벗어나 버리는 일이 생깁니다.

 

그래서 사용하는 스케치북 이란 스킨(글을 올리는 게시판 모들) 의 css 스타일 코드에 영상을 <div>란 태그로 감싸서 대응하는 코드를 코팅 했습니다.

 

사실 유튜브를 카카오나 네이버 공유식으로 자동으로 링크를 옹영상으로 올리는 API가 개발되면 더 글올리기 편하지만

대부분의 개인사이트나 중소 사이트에 이 라이브러리가 없는것이 현실이다보니 돌아가는 해결책으로 일단 PC에서 올리는 유튜브의 아이프레임 코드를 css로 코팅 했습니다.  

 

*컴퓨터나 노트북에서 유튜브 동영상을 공유 하실때 아래 코드를 이해 하시면 됩니다.

 

(예제..)

 

<div class="video-container">/////안에 복사한 유튜브 코드////

<iframe  코드내용 생략 ></iframe>

</div>

 

 

이런식으로 말이죠 안에 유튜브 에서 복사한 코드를 삽입 하시면 됩나다....

 

참 그리고 소스를 삽입하실때는 ..

 html편집창에서 넣어야 합니다...

 

사용할 태그소스 이안에 유튜브 내용 삽입 문서로 링크한 아래 코드를 사용 하시면 됩니다

 

유투브 코드.txt

 

그리고 해당 태그는 반드시 <p></p> 안에 위치 해야 합니다 안그러면 프레임 삽입 이후에 작성 하시는 글들에 해당 css요소가 영향을 주게되어 </p> 막음 소스로 해당 요소의 코드성질의 상속을 막으셔야 됩니다....

 

아시겠죠?....

사용 하시는 방법을 간단한 동영상으로 넣어 보겠습니다.

먼저 모드를 소스 모드로 변경 하셔야 됩니다..

 

(이 방법으로 올린 예제 유튜브 영상 )

 

 

이상 입니다 즐거운 교회 생활과 함께 많은 좋은글들을 공유해 주시기 바랍니다...

 

 

 

 

 

 

 

 

TAG •
?
  • profile
    교회_지킴이 2020.04.08 10:47

    사용하실  태그 소스를 파일로 첨부 하였습니다

  • profile
    교회_지킴이 2020.04.08 11:41
    더 간단하고 좋은 방법이 있으면 fix 한후 공지 하겠습니다...
    대충 찾아본 방법으로 올린것이고 대략 js파일등에서 video fraim 관련 코팅 방법들이 있는듯 하니 시간될때 할수있는 방법으로 코딩한후 글올릴께요

공지사항

공지사항을 알립니다

  1. 컴퓨터에서 교회 사이트에 유튜브 동영상을 올리시는 방법 설명

  2. 교회 홈페이지 작업을 완료 했습니다

  3. 교회 공지 사이트 개편중 입니다.

  4. 사이트 개편 공지

  5. 사이트 작업

  6. 레이아웃 작업

  7. 공지사항 테스트

  8. No Image 04Apr
    by 교회_지킴이
    2020/04/04 by 교회_지킴이
    Views 10 

    공지

Board Pagination Prev 1 Next
/ 1
CLOSE