반응형

iframe 3

유튜브 동영상 관련동영상 노출 설정

Iframe에서 youtube 동영상을 플레이(노출)시킬 때, 해당 영상이 종료되면 여러 광고 영상들이 노출되는데 일반 기업에서는 광고 영상보다는 자신들의 회사 영상같이 기존 영상과 연관되어 있는 동영상이 노출되기를 원하게 됩니다. 그럴 경우 아래처럼 영상 url 뒤에 옵션 인자를 붙여주게 되면 관련 동영상이 노출됩니다. 💡 영상 종료 후 관련 영상이 노출되게 하는 방법 youtube/embed/동영상주소?rel=0 해당 url뒤에 ?rel=0 을 붙여주면 동영상이 종료된 후에 관련 동영상이 변경됩니다. 매개변수 값을 기본값인1로 설정하면 플레이어에 관련 동영상이 표시됩니다. 매개변수 값을0으로 설정하면 플레이어에 관련 동영상이 표시되지 않습니다. 대신rel매개변수를0으로 설정하면 방금 동영상이 재생된 ..

IT/Front-End 2022.04.27

페이지 최상단 스크롤 이동 (feat. iframe)

화면이 웹에 비해서 상대적으로 작은 모바일이나 쇼핑몰처럼 다양한 상품을 보여줘야 하는 사이트에서는 화면이 길어지게 되면 사용자가 다시 화면의 최상단으로 이동하기가 굉장히 힘들어집니다. 그래서 이런 단점을 보완하기 위해 특정 버튼을 클릭하게 되면 해당 Page의 최상단으로 이동하는 기능을 구현하여 사용자에게 편의성을 제공하게 됩니다. $('.btn-top').on('click', function(){ $('html, body').animate({scrollTop:0}, 300);} ); 해당 기능에 조금 더 인터렉티브한 효과를 주고 싶으면 easing플러그인을 사용하여 다양한 텐션의 느낌으로 모션 효과를 사용할 수 있습니다. easing은 JQuery에서 animation을 사용할 때 해당 animatio..

IT/JavsScript 2021.03.12

가로 세로 비율 유지가 되는 박스(feat. Youtube)

이제는 많은 분들이 아시지만 다시 예전의 내용을 정리하게 되면서 내용을 정리해 봅니다. 요즘은 동영상이나 youtube 영상을 웹에 바로 보여주는 경우가 많습니다. 이럴 때 가로 사이즈가 고정된 사이즈면 상관없지만 다양한 사이즈의 모바일이나 반응형 웹 화면으로 화면을 구성한다면 가로 화면 폭 사이즈에 맞게 해당 세로 값 화면 값을 유동적으로 변경될 수 있도록 해 주어야 화면이 틀어지거나 비율이 이상하게 나오지 않고 정상적인 화면이 유지됩니다. 요즘 영상은 16:9 화면 비율이 일반적이기 때문에 해당 화면을 비례식으로 놓고 계산하면 대략 56.26% 라는 값이 나오게 됩니다. 비율 값은 어떤 값으로 적용하냐에 따라서 조금은 차이가 있을 수 있습니다. 참고 : 비례식 공식 기본값(100) : 사용할 영상(박..

IT/HTML & CSS 2021.03.10
반응형
//