===============================================================================
<!doctype html>
<html>
<head>
<style>
html, body { margin: 0; }
a{
color: #ffffff;
}
#visual {
position: relative;
height: 950px;
text-align: center;
overflow: hidden;
}
#video-bg, #visual-content {
position: absolute;
top: 50%;
left: 50%;
webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
#video-bg {
height: 100%;
background: #000; /* 배경 이미지로 대체 가능 */
background-size: cover;
z-index: -100;
}
#video-bg iframe {
border: none;
width: 100%;
height: 100%;
}
#visual-content {
z-index: 100;
}
h1 {
font-size: 42px;
font-weight: normal;
color: #fff;
margin-bottom: 60px;
}
#visual-btn {
color: #fff;
font-size: 20px;
border: 2px solid #fff;
padding: 12px 24px;
border-radius: 5px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script>
if ($(window).width()>500) {
$('#video-bg iframe').css('display','block');
$('#video-bg').css('height', $(window).width()*0.57);
}else{
$('#video-bg iframe').css('display','none');
}
</script>
</head>
<body>
<div id="visual">
<div id="video-bg">
<iframe width="560" height="315" src="https://www.youtube.com/embed/q7uyQban2yQ?autoplay=1&controls=0&showinfo=0&wmode=opaque&autohide=1&loop=1&playlist=cZcsko5a9lE">
</iframe>
</div>
<div id="visual-content">
<h1>몰디브 쥬메이라 리조트</h1>
<span id="visual-btn">
바로가기
</span>
</div>
</div>
</body>
</html>
'!!...JS-HTML' 카테고리의 다른 글
| [javascript]jQuery ajax 반복호출시 async 옵션 설정 (0) | 2017.05.09 |
|---|---|
| [javascript] 콜백 함수의 활용 (0) | 2017.02.23 |
| [javascript]jQuery 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기 (0) | 2016.11.29 |
| HTML OGP ( URL 미리보기 설정 - 카카오톡, 페이스북, 네이버블러그 ) (0) | 2015.12.16 |
| javascript 간단한 이미지 슬라이드 샘플 - jQuery - (0) | 2015.11.12 |