티스토리에서 SSL 적용 후 유튜브 동영상이 제대로 표시되지 않는 경우

2018. 9. 2. 19:46 | 댓글 4

티스토리에서 예정대로 지난 8월 말일에 SSL을 적용할 수 있도록 업데이트되었습니다.

기존 http 주소를 https 주소로 제대로 변경하지 않으면 SSL 적용 후에 구글 크롬에서 "보안 연결" 문구가 표시되지 않고 i 경고 기호가 표시될 수 있습니다.

특히 티에디션에서 불러오는 이미지로 인해 보안 적용이 제대로 안 되는 문제가 발생하고 있습니다.

또, 댓글의 아바타 이미지 때문에 보안 연결이 제대로 안 될 수도 있습니다. 이 경우에는 '홈페이지 아이콘 표시 (파비콘)' 또는 '블로그 아이콘 표시' 플러그인을 사용하지 않도록 '해제'하면 문제가 해결될 것입니다("티스토리 블로그에서 SSL을 적용한 후 "보안 연결" 녹색 자물쇠 표시가 나타나지 않는 경우" 참고).

티스토리에서 SSL 적용 후 유튜브 동영상이 제대로 표시되지 않는 문제가 발생하는 경우

플러그인을 사용해서 YouTube 영상을 넣는 경우 http 주소로 링크가 연결되어 있을 것입니다. 그런 경우, 글 편집 화면에서 http 주소를 https로 변경하시거나 http://를 //로 변경하면 문제가 해결될 수 있습니다.

다른 방법으로 플러그인을 사용하지 말고 직접 공유 코드를 삽입하는 것도 가능합니다. 저는 다음 글에서 제시하는 방법을 사용하여 YouTube 동영상을 HTML 모드에서 직접 추가하고 있습니다.

링크된 글의 방법은 네이버 동영상, Vimeo 동영상 등 iframe을 사용하는 코드에도 사용이 가능합니다. 이 방법을 사용하면 반응형으로 작동하여 모바일 기기에서도 동영상이 제대로 표시될 것입니다.

티스토리에 적용하는 방법은 간단합니다. 다음 CSS 코드를 꾸미기 > 스킨 편집 > Html 편집 > 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%;
}
그런 다음 공유하고자 하는 동영상 Embed 코드를 다음 형식으로 HTML 코드로 삽입합니다.
<div class="video-container">동영상 Embed 코드 </div>

예시:

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/1uaVhKocqPw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

그러면 다음과 같이 플러그인을 사용하지 않고 YouTube 동영상을 삽입할 수 있습니다.

(비발디의 '사계' 중 '가을'입니다.)

끝없이 이어질 것 같았던 여름의 무더위가 주춤해지고 이제 가을의 문턱에 왔네요. 9월은 추석 명절 때문에 빠르게 지나갈 것 같습니다.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    veneto

    저는 다행히 외부컨텐츠항목으로 넣어서 문제가 없었네요

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2018.09.03 07:52 신고

      플러그인을 사용하여 삽입하는 경우(예: 다음지도, 유튜브 동영상) 오류가 발생하는 것 같습니다. 그럴 경우 일일이 찾아서 수정해주어야 하는 번거로움이 있을 것입니다.

      직접 공유 코드를 복사하여 삽입하는 경우에는 별 문제가 없는 것 같습니다. (문제가 있다면 http를 https로 변경해주면 문제가 해결될 수 있을 것입니다.)

  2. thumbnail
    IT세레스

    유튜브 동영상을 거의 넣지 않지만 한번 찾아봐야겠습니다.