운영에 관련된 다양한 정보를 공유합니다.

Contact Us  커뮤니티

Today : 2022년 5월 16일 (Mon)

  유튜브(yutube)영상을 페이지의 폭에 맞처 보여주기 소스
ㆍ작성일: 2020-03-26 (목) 16:43 ㆍ조회: 1096 ㆍ분류: 운영정보&팁

유튜브영상을 홈페이지에 넣을때 화면의 해상도에 따라 맞춰서 보여주는 소스입니다.


<!DOCTYPE html>
<html>
<head>
<title>커피야놀자</title>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
.media-wrapper{
padding-bottom:75%;
height:0;
position:relative;
}
iframe{
position:absolute; left:0; top:0;
width:100%;
height:100%;
</style>
</head>
<body>
<section>
<header>
<h1>유투브영상을 화면사이즈에 맞게 줄였다 늘였다 할 수 있는 소스</h1>
</header>
<div class="media-wrapper">
<iframe width="420" height="315" src="https://www.youtube.com/embed/Ya6hNdXbaz0" frameborder="0" allowfullscreen></iframe>
</div>
</section>
</html>

반응형이나 모바일환경을 고려할때 유용하게 사용하실 수 있습니다.




윗글 네이버검색등록을 위한 sitemap 파일 생성하기
아래글 대전홈페이지제작 스마트스토어 오픈

TOP