티스토리 유튜브(Youtube) 동영상 플레이(Play) 오류 해결

안녕하세요.

티스토리에 글을 올리면서 유튜브 동영상 등을 참고로 올리는 경우가 있습니다.

 

저도 유튜브에 동영상 올리고 URL을 복사하여 넣었는데 다음과 같이 오류가 발생하였다는

문구만 나오고 동영상 재생이 안 되는 문제가 발생하였습니다.

 

문제 해결을 위하여 검색을 해보니 티스토리 관리 화면에 동영상 재생을 위한 CSS 코드를 추가하고

동영상 Embed 코드를 HTML코드로 추가하여 해결 할 수 있었습니다.

 

참고자료 : https://www.thewordcracker.com/miscellaneous/make-youtube-and-vimeo-vides-responsive/

 

1. 동영상 재생 관련 CSS 추가하기

1-1. Tistory 블로그관리 > 꾸미기 > 스킨편집 > Html 편집 > CSS 탭 열기

 

 

 

1-2. 동영상 CSS 코드 추가

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe,
  .video-container object,
  .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .entry-content img,
  .entry-content iframe,
  .entry-content object,
  .entry-content embed {
  max-width: 100%;
}

 

2. 유튜브 영상 HTML Embed 코드 삽입

2-1. HTML 모드 에서 다음 코드 추가

<div class="video-container">
   동영상 Embed 코드
</div>

 

2-2. 동영상 Embed 코드 얻기(복사)

유튜브 등 동영상 영역에서 오른쪽 마우스 버튼 클릭하여 '소스 코드 복사'

2-3. HTML 편집모드 들어가기

2-3. HTML 코드 추가

<div class="video-container">
   <!-- 복사한 동영상 Embed 코드 -->
   <iframe width="854" height="480" 
   src="https://www.youtube.com/embed/1GJP__sQ-rk" 
   frameborder="0" allow="accelerometer; autoplay; 
   encrypted-media; gyroscope; picture-in-picture" 
   allowfullscreen></iframe>
   <!-- 복사한 동영상 Embed 코드 -->
</div>

2-4. HTML 코드로 추가된 유튜브 동영상

※ HTML Embed 코드 추가 후 완료하면 다음과 같이 변경이 되네요.

<div class="video-container">
   <!-- 복사한 동영상 Embed 코드 --> 
   <iframe src="https://www.youtube.com/embed/1GJP__sQ-rk" width="854" height="480" 
   frameborder="0" allowfullscreen=""></iframe> 
   <!-- 복사한 동영상 Embed 코드 -->
</div>

 

감사합니다.