<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Shorts Embed</title>
<style>
.split-screen {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
}
.left-side {
flex: 1.5;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.right-side {
flex: 0.5;
background-color: #e0e0e0;
display: flex;
align-items: top;
justify-content: center;
}
.embed-container {
position: relative;
width: 100%;
height: 100%;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.desktop_shorts {
display: flex; /* 데스크톱에서는 flex로 표시되도록 설정 */
}
.mobile_shorts {
display: none;
}
@media screen and (max-width: 800px) {
.desktop_shorts {
display: none; /* 모바일 화면에서 데스크톱 버전을 숨김 */
}
.mobile_shorts {
display: flex; /* 모바일 화면에서 모바일 버전을 표시 */
}
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
margin: 0 auto;
gap: 10px;
}
.widget {
display: flex;
align-items: center;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.widget-image {
width: 140px;
height: auto;
margin-right: 10px;
}
.full-screen {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh; /* 화면 전체 높이 */
background-color: #f9f9f9; /* 배경 색상 조정 */
}
.full-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.widget-text {
margin: 0;
}
</style>
</head>
<body>
<div class="desktop_shorts split-screen">
<div class="left-side">
<div class="embed-container">
<iframe src="https://player.vimeo.com/video/966282542?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="03. 파리 플리"></iframe>
</div>
</div>
<div class="right-side">
<div class="container">
<div class="widget">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widget">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widget">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
</div>
</div>
</div>
<div class="mobile_shorts full-screen">
<div class="full-inner">
<div class="embed-container mobile-container">
<iframe id="youtube-video-mobile" src="https://www.youtube.com/embed/jIXg_y-geMo?autoplay=1&controls=0&loop=1&playlist=jIXg_y-geMo&mute=1"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; showinfo=0; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<div class="container">
<div class="widget">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widget">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widget">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
</div>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
// 데스크톱과 모바일 모두를 위한 iframe 초기화
const desktopPlayer = new YT.Player('youtube-video-desktop', {
height: '100%',
width: '100%',
videoId: 'jIXg_y-geMo',
playerVars: {
'autoplay': 1,
'controls': 0,
'loop': 1,
'showinfo': 0,
'modestbranding': 0,
'playlist': 'jIXg_y-geMo',
'mute': 1
},
events: {
'onReady': function(event) {
event.target.playVideo();
}
}
});
const mobilePlayer = new YT.Player('youtube-video-mobile', {
height: '100%',
width: '100%',
videoId: 'jIXg_y-geMo',
playerVars: {
'autoplay': 1,
'controls': 0,
'loop': 1,
'showinfo': 0,
'modestbranding': 0,
'playlist': 'jIXg_y-geMo',
'mute': 1
},
events: {
'onReady': function(event) {
event.target.playVideo();
}
}
});
}
</script>
</body>
</html>
HTML
복사
모바일일때는 모달, 데스크톱 전체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimeo Embed</title>
<style>
.split-screen {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
}
.left-side {
flex: 1.5;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.right-side {
flex: 0.5;
background-color: #e0e0e0;
display: flex;
align-items: top;
justify-content: center;
}
.embed-container {
position: relative;
width: 100%;
height: 100%;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.desktop_shorts {
display: flex;
}
.mobile_shorts {
display: none;
}
@media screen and (max-width: 800px) {
.desktop_shorts {
display: none;
}
.mobile_shorts {
display: flex;
flex-direction: column; /* 세로 방향으로 배치 */
justify-content: flex-end; /* 컨테이너를 화면의 맨 아래로 위치 */
width: 100%;
height: 80vh;
background-color: #8A8A8A;
position: relative;
}
.mobile_shorts .container {
position: relative;
width: 100%;
z-index: 2; /* Ensure this is above the video */
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: bottom;
overflow-x: auto;
}
.mobile_shorts .widgetshorts {
background-color: rgba(0, 0, 0, 0.5); /* Optional: for better readability */
min-width: 50%; /* Adjust this to control the width of each widget */
margin-right: 10px;
}
.mobile_shorts .embed-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 1; /* Ensure this is below the container */
}
.mobile_shorts .widget-image {
width: 60px;
height: auto;
margin-right: 10px;
}
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
margin: 0 auto;
gap: 10px;
}
.widgetshorts {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.5); /* 검은색 배경에 50% 투명도 */
}
.widget-image {
width: 140px;
height: auto;
margin-right: 10px;
}
.widget-text {
margin: 0;
color: #fff; /* Optional: for better readability */
}
</style>
</head>
<body>
<div class="desktop_shorts split-screen">
<div class="left-side">
<div class="embed-container">
<iframe id="vimeo-video-desktop" src="https://player.vimeo.com/video/966282542?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" width="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="03. 파리 플리"></iframe>
</div>
</div>
<div class="right-side">
<div class="container">
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
</div>
</div>
</div>
<div class="mobile_shorts full-screen">
<div class="container">
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
</div>
<div class="embed-container mobile_shorts">
<iframe id="youtube-video-mobile" src="https://www.youtube.com/embed/jIXg_y-geMo?autoplay=1&controls=0&loop=1&playlist=jIXg_y-geMo&mute=1"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; showinfo=0; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize Vimeo player for desktop
var optionsDesktop = {
id: 966282542, // Replace with your Vimeo video ID
width: '100%',
loop: true,
autoplay: true,
muted: true
};
var desktopPlayer = new Vimeo.Player('vimeo-video-desktop', optionsDesktop);
desktopPlayer.setVolume(0); // Ensure the video is muted
desktopPlayer.play().catch(function(error) {
console.error('Error playing the video:', error);
});
// Initialize Vimeo player for mobile
var optionsMobile = {
id: 966282542, // Replace with your Vimeo video ID
width: '100%',
loop: true,
autoplay: true,
muted: true
};
var mobilePlayer = new Vimeo.Player('vimeo-video-mobile', optionsMobile);
mobilePlayer.setVolume(0); // Ensure the video is muted
mobilePlayer.play().catch(function(error) {
console.error('Error playing the video:', error);
});
});
</script>
<script>
function onYouTubeIframeAPIReady() {
// 데스크톱과 모바일 모두를 위한 iframe 초기화
const desktopPlayer = new YT.Player('youtube-video-desktop', {
height: '100%',
width: '100%',
videoId: 'jIXg_y-geMo',
playerVars: {
'autoplay': 1,
'controls': 0,
'loop': 1,
'showinfo': 0,
'modestbranding': 0,
'playlist': 'jIXg_y-geMo',
'mute': 1
},
events: {
'onReady': function(event) {
event.target.playVideo();
}
}
});
const mobilePlayer = new YT.Player('youtube-video-mobile', {
height: '100%',
width: '100%',
videoId: 'jIXg_y-geMo',
playerVars: {
'autoplay': 1,
'controls': 0,
'loop': 1,
'showinfo': 0,
'modestbranding': 0,
'playlist': 'jIXg_y-geMo',
'mute': 1
},
events: {
'onReady': function(event) {
event.target.playVideo();
}
}
});
}
</script>
</body>
</html>
HTML
복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimeo Embed</title>
<style>
.split-screen {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
}
.left-side {
flex: 1.5;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.right-side {
flex: 0.5;
background-color: #e0e0e0;
display: flex;
align-items: top;
justify-content: center;
}
.embed-container {
position: relative;
width: 100%;
height: 100%;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.desktop_shorts {
display: flex;
}
.mobile_shorts {
display: none;
}
@media screen and (max-width: 800px) {
.desktop_shorts {
display: none;
}
.mobile_shorts {
display: flex;
flex-direction: column; /* 세로 방향으로 배치 */
justify-content: flex-end; /* 컨테이너를 화면의 맨 아래로 위치 */
width: 100%;
height: 80vh;
background-color: #8A8A8A;
position: relative;
}
.mobile_shorts .container {
position: relative;
width: 100%;
z-index: 2; /* Ensure this is above the video */
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: bottom;
overflow-x: auto;
}
.mobile_shorts .widgetshorts {
background-color: rgba(0, 0, 0, 0.5); /* Optional: for better readability */
min-width: 50%; /* Adjust this to control the width of each widget */
margin-right: 10px;
}
.mobile_shorts .embed-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 1; /* Ensure this is below the container */
}
.mobile_shorts .widget-image {
width: 60px;
height: auto;
margin-right: 10px;
}
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
margin: 0 auto;
gap: 10px;
}
.widgetshorts {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.5); /* 검은색 배경에 50% 투명도 */
}
.widget-image {
width: 140px;
height: auto;
margin-right: 10px;
}
.widget-text {
margin: 0;
color: #fff; /* Optional: for better readability */
}
</style>
</head>
<body>
<div class="desktop_shorts split-screen">
<div class="left-side">
<div class="embed-container">
<iframe id="vimeo-video-desktop" src="https://player.vimeo.com/video/966282542?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" width="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="03. 파리 플리"></iframe>
</div>
</div>
<div class="right-side">
<div class="container">
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
</div>
</div>
</div>
<div class="mobile_shorts full-screen">
<div class="container">
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widgetshorts">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
<div class="widgetshorts">
<img src="https://via.placeholder.com/100" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용</p>
</div>
</div>
<div class="embed-container mobile_shorts">
<iframe id="youtube-video-mobile" src="https://www.youtube.com/embed/jIXg_y-geMo?autoplay=1&controls=0&loop=1&playlist=jIXg_y-geMo&mute=1"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; showinfo=0; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize Vimeo player for desktop
var optionsDesktop = {
id: 966282542, // Replace with your Vimeo video ID
width: '100%',
loop: true,
autoplay: true,
muted: true
};
var desktopPlayer = new Vimeo.Player('vimeo-video-desktop', optionsDesktop);
desktopPlayer.setVolume(0); // Ensure the video is muted
desktopPlayer.play().catch(function(error) {
console.error('Error playing the video:', error);
});
// Initialize Vimeo player for mobile
var optionsMobile = {
id: 966282542, // Replace with your Vimeo video ID
width: '100%',
loop: true,
autoplay: true,
muted: true
};
var mobilePlayer = new Vimeo.Player('vimeo-video-mobile', optionsMobile);
mobilePlayer.setVolume(0); // Ensure the video is muted
mobilePlayer.play().catch(function(error) {
console.error('Error playing the video:', error);
});
});
</script>
<script>
function onYouTubeIframeAPIReady() {
// 데스크톱과 모바일 모두를 위한 iframe 초기화
const desktopPlayer = new YT.Player('youtube-video-desktop', {
height: '100%',
width: '100%',
videoId: 'jIXg_y-geMo',
playerVars: {
'autoplay': 1,
'controls': 0,
'loop': 1,
'showinfo': 0,
'modestbranding': 0,
'playlist': 'jIXg_y-geMo',
'mute': 1
},
events: {
'onReady': function(event) {
event.target.playVideo();
}
}
});
const mobilePlayer = new YT.Player('youtube-video-mobile', {
height: '100%',
width: '100%',
videoId: 'jIXg_y-geMo',
playerVars: {
'autoplay': 1,
'controls': 0,
'loop': 1,
'showinfo': 0,
'modestbranding': 0,
'playlist': 'jIXg_y-geMo',
'mute': 1
},
events: {
'onReady': function(event) {
event.target.playVideo();
}
}
});
}
</script>
</body>
</html>
HTML
복사
<style>
.gif1{
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7c901f75-04fa-4153-8eee-cfa0426d9dc7%2FGIF_(%25E1%2584%2580%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AA%25E1%2584%258C%25E1%2585%25B5%25E1%2586%25AF)%25E1%2584%2585%25E1%2585%25B5%25E1%2584%2582%25E1%2585%25B2%25E1%2584%258B%25E1%2585%25A5%25E1%2586%25AF_%25E1%2584%2592%25E1%2585%25A9%25E1%2586%25B7%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258B%25E1%2585%25A7%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC_%25E1%2584%2580%25E1%2585%25A1%25E1%2584%2585%25E1%2585%25A9.gif&blockId=e3386c15-2a74-43c9-925f-e061c4d72dd5'); /* 이미지 경로 지정 */
}
.gif2{
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7c901f75-04fa-4153-8eee-cfa0426d9dc7%2FGIF_(%25E1%2584%2580%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AA%25E1%2584%258C%25E1%2585%25B5%25E1%2586%25AF)%25E1%2584%2585%25E1%2585%25B5%25E1%2584%2582%25E1%2585%25B2%25E1%2584%258B%25E1%2585%25A5%25E1%2586%25AF_%25E1%2584%2592%25E1%2585%25A9%25E1%2586%25B7%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258B%25E1%2585%25A7%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC_%25E1%2584%2580%25E1%2585%25A1%25E1%2584%2585%25E1%2585%25A9.gif&blockId=e3386c15-2a74-43c9-925f-e061c4d72dd5'); /* 이미지 경로 지정 */
}
.gif3{
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7c901f75-04fa-4153-8eee-cfa0426d9dc7%2FGIF_(%25E1%2584%2580%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AA%25E1%2584%258C%25E1%2585%25B5%25E1%2586%25AF)%25E1%2584%2585%25E1%2585%25B5%25E1%2584%2582%25E1%2585%25B2%25E1%2584%258B%25E1%2585%25A5%25E1%2586%25AF_%25E1%2584%2592%25E1%2585%25A9%25E1%2586%25B7%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258B%25E1%2585%25A7%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC_%25E1%2584%2580%25E1%2585%25A1%25E1%2584%2585%25E1%2585%25A9.gif&blockId=e3386c15-2a74-43c9-925f-e061c4d72dd5'); /* 이미지 경로 지정 */
}
.gif4{
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7c901f75-04fa-4153-8eee-cfa0426d9dc7%2FGIF_(%25E1%2584%2580%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AA%25E1%2584%258C%25E1%2585%25B5%25E1%2586%25AF)%25E1%2584%2585%25E1%2585%25B5%25E1%2584%2582%25E1%2585%25B2%25E1%2584%258B%25E1%2585%25A5%25E1%2586%25AF_%25E1%2584%2592%25E1%2585%25A9%25E1%2586%25B7%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258B%25E1%2585%25A7%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC_%25E1%2584%2580%25E1%2585%25A1%25E1%2584%2585%25E1%2585%25A9.gif&blockId=e3386c15-2a74-43c9-925f-e061c4d72dd5'); /* 이미지 경로 지정 */
}
.gif5{
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7c901f75-04fa-4153-8eee-cfa0426d9dc7%2FGIF_(%25E1%2584%2580%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AA%25E1%2584%258C%25E1%2585%25B5%25E1%2586%25AF)%25E1%2584%2585%25E1%2585%25B5%25E1%2584%2582%25E1%2585%25B2%25E1%2584%258B%25E1%2585%25A5%25E1%2586%25AF_%25E1%2584%2592%25E1%2585%25A9%25E1%2586%25B7%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258B%25E1%2585%25A7%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC_%25E1%2584%2580%25E1%2585%25A1%25E1%2584%2585%25E1%2585%25A9.gif&blockId=e3386c15-2a74-43c9-925f-e061c4d72dd5'); /* 이미지 경로 지정 */
}
.gif6{
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7c901f75-04fa-4153-8eee-cfa0426d9dc7%2FGIF_(%25E1%2584%2580%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AA%25E1%2584%258C%25E1%2585%25B5%25E1%2586%25AF)%25E1%2584%2585%25E1%2585%25B5%25E1%2584%2582%25E1%2585%25B2%25E1%2584%258B%25E1%2585%25A5%25E1%2586%25AF_%25E1%2584%2592%25E1%2585%25A9%25E1%2586%25B7%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258B%25E1%2585%25A7%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC_%25E1%2584%2580%25E1%2585%25A1%25E1%2584%2585%25E1%2585%25A9.gif&blockId=e3386c15-2a74-43c9-925f-e061c4d72dd5'); /* 이미지 경로 지정 */
}
.gif7{
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7c901f75-04fa-4153-8eee-cfa0426d9dc7%2FGIF_(%25E1%2584%2580%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AA%25E1%2584%258C%25E1%2585%25B5%25E1%2586%25AF)%25E1%2584%2585%25E1%2585%25B5%25E1%2584%2582%25E1%2585%25B2%25E1%2584%258B%25E1%2585%25A5%25E1%2586%25AF_%25E1%2584%2592%25E1%2585%25A9%25E1%2586%25B7%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258B%25E1%2585%25A7%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC_%25E1%2584%2580%25E1%2585%25A1%25E1%2584%2585%25E1%2585%25A9.gif&blockId=e3386c15-2a74-43c9-925f-e061c4d72dd5'); /* 이미지 경로 지정 */
}
.gif8{
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7c901f75-04fa-4153-8eee-cfa0426d9dc7%2FGIF_(%25E1%2584%2580%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AA%25E1%2584%258C%25E1%2585%25B5%25E1%2586%25AF)%25E1%2584%2585%25E1%2585%25B5%25E1%2584%2582%25E1%2585%25B2%25E1%2584%258B%25E1%2585%25A5%25E1%2586%25AF_%25E1%2584%2592%25E1%2585%25A9%25E1%2586%25B7%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258B%25E1%2585%25A7%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC_%25E1%2584%2580%25E1%2585%25A1%25E1%2584%2585%25E1%2585%25A9.gif&blockId=e3386c15-2a74-43c9-925f-e061c4d72dd5'); /* 이미지 경로 지정 */
}
</style>
<style>
.hello-world {
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 100%; /* 버튼의 너비 조정 */
border: 2px solid;
font-weight: bold;
color: white;
background-color: #7B5AF1;
transition: 300ms;
border-radius: 3px;
cursor: pointer;
background-size: cover; /* 배경 이미지를 요소에 맞게 확장 */
background-position: center; /* 배경 이미지의 위치 조정 */
}
.hello-world:hover {
background-color: white;
color: #7B5AF1;
}
.short_form {
display: flex;
flex-direction: column;
position: relative; /* 상대 위치 지정 */
}
.slide_button_n:hover, .slide_button_p:hover{
background-color:#000000;
color: #ffffff;
}
.slide_prev_button,
.slide_next_button {
font-family: "Rubik", sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-weight:bold;
width: 40px;
height: 40px;
cursor: pointer;
border-radius: 100px;
background-color: white;
opacity: 0.7;
background-size: cover;
z-index: 2; /* 버튼의 쌓임 순서를 결정 */
position: absolute; /* 절대 위치 지정 */
text-align: center;
}
.slide_button_n {
right: 0;
}
.slide_button_p {
left: 0;
}
.short_cont {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center; /* 가로 중앙 정렬 */
text-align: center;
align-items: center; /* 추가: 세로 중앙 정렬 */
position: relative; /* 상대 위치 지정 */
}
.collection_block_main {
width: 90%;
flex-wrap: nowrap;
flex-grow: 1;
flex-shrink: 0;
z-index: 1;
margin-right: 0px;
margin-bottom: 0px;
position: relative; /* 상대 위치 지정 */
}
.slide_main {
display: grid;
position: relative;
/*한 줄에 노출될 카드의 개수 repeat(n,1fr) */
grid-template-columns: repeat(20, 1fr);
row-gap: 16px;
column-gap: 2px;
padding-top: 16px;
padding-bottom: 4px;
overflow-x:hidden;
overflow-y: hidden;
max-width: 2000%; /* 최대 너비 설정 */
margin: 0 auto; /* 중앙 정렬 */
z-index: 0;
}
/* 1줄 */
.slide {
display: grid;
position: relative;
width: 100%;
height: auto;
grid-template-columns: repeat(4, 1fr);
column-gap: 12px;
padding-top: 16px;
padding-bottom: 4px;
margin: 0 auto;
}
/* 카드 리스트 */
.collection_card_list {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.collection_item_bottom {
display: block;
overflow: hidden;
border: none;
background: white;
transition: background 100ms ease-out;
position: static;
/*카드 위젯 크기 height:npx; width: npx; */
height: 240px;
width: 180px;
flex-shrink: 0; /* 크기 변경 방지 */
margin: 0 8px; /* 간격 설정 */
}
.collection_card_list {
width: 100%;
height: 100%;
display: flex;
flex-direction: column; /* 추가: 열 방향으로 정렬 */
align-items: top; /* 추가: 가운데 정렬 */
}
/*텍스트박스*/
.card_text {
width: 100%;
padding: 40px 10px 10px 10px !important;
margin-top: 270px;
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
line-height: 22px;
heihgt: auto;
text-align: left;
font-family: "Gmarket Sans";
}
.button_text {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.middle{
font-size: 12px;
}
.small{
font-size: 10px;
margin: 4px 0 0 0;
font-weight: 400;
}
.short_txt_box{
text-align: left;
font-weight: bold;
line-height: 12px;
margin: 5px 0 0 3px;
}
.top_progress_container{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.progress-bar-container {
width: 50px;
height: 6px; /* 프로그레스 바와 이미지의 높이 */
background-color: #EFEFEF;
border-radius: 5px;
overflow: hidden;
position: relative; /* 이미지를 포함하기 위해 position 속성 추가 */
justify-content: center;
align-items: center;
background-color: #ccc; /* 진행 표시자 배경색 */
margin-top: 10px; /* 진행 표시자와 슬라이드 사이 간격 조정 */
}
.progress-bar {
width: 0%;
height: 100%;
background-color: #6B43DD; /* 진행 표시자 색상 */
position: absolute;
}
@media screen and (max-width: 600px) {
.slide_main{
overflow-x: auto;
}
.hello-world {
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 140px; /* 버튼의 너비 조정 */
height: 200px; /* 버튼의 높이 조정 */
border: 2px solid;
font-weight: bold;
color: white;
background-color: #7B5AF1;
transition: 300ms;
border-radius: 8px;
cursor: pointer;
background-size: cover; /* 배경 이미지를 요소에 맞게 확장 */
background-position: center; /* 배경 이미지의 위치 조정 */
}
.card_text {
width: 100%;
padding: 10px;
margin-top: 150px;
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10px;
line-height: 13px;
height: auto;
text-align: left;
font-family: "Gmarket Sans";
}
}
.top_progress_container{
display:none;}
</style>
<!-- 이미지 갤러리 -->
<style>
/*베스트*/
.red_stoke{
border: #FF8465 4px solid !important;
box-sizing: border-box!important;}
.yellow_stoke{
border: #FFC534 4px solid !important;
box-sizing: border-box !important;
}
/*1주*/
.green_stoke{
border: #C6F491 4px solid!important;
box-sizing: border-box !important;
}
/*마감*/
.end{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* 버튼 텍스트 색상 */
font-size: 24px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
}
/* 전체 */
.collection_block {
display: flex;
}
/* 왼쪽 태그 */
.tag1 {
background-color: #ffffff;
border: solid #7B5AF1 1px;
color: #7B5AF1;
border-radius: 4px;
padding: 2px 8px;
}
/* 보라 */
.tag2 {
background-color: #F2EFFF;
color: #7B5AF1;
border-radius: 4px;
padding: 2px 8px;
margin-right: 4px;
}
/* 마감임박 빨강 */
.tag3 {
white-space: nowrap;
background-color: #FFEDE4;
color: #FA0100;
border-radius: 4px;
padding: 2px 8px;
margin-right: 4px;
}
/* 프로그램 비교, 보라노랑 */
.tag4 {
background-color: #856EFF;
color: #FFD058;
border-radius: 4px;
padding: 4px 8px;
margin-right: 4px;
}
/* 프로그램 비교, 회색보라 */
.tag5 {
background-color: #ECECEC;
color: #5841D7;
border-radius: 4px;
padding: 3px 8px;
}
/* 프로그램 비교, 노랑빨강 */
.tag6 {
background-color: #FBE699;
color: #FF0000;
border-radius: 4px;
padding: 2px 8px;
margin-right: 4px;
}
/* 마감 회색 */
.tag7 {
background-color: #ECECEC;
color: #777777;
border-radius: 4px;
padding: 2px 8px;
margin-right: 4px;
}
/* 노란색 */
.tag8 {
background-color: #FFFBEC;
color: #FF9900;
border-radius: 4px;
padding: 2px 8px;
margin-right: 4px;
}
/* 하늘색 */
.tag9 {
background-color: #C2E2FF;
color: #0085FF;
border-radius: 4px;
padding: 2px 8px;
margin-right: 4px;
}
/* 주황색 */
.tag10 {
background-color: #FFF0DE;
color: #FF5C00;
border-radius: 4px;
padding: 2px 8px;
margin-right: 4px;
}
/* 마감 */
.end_soon {
padding: 0px 13px 0px 13px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 84%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-size: 7px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
/*대기가능*/
.can_wait {
padding: 0px 13px 0px 13px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 84%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#FF9E2D;
font-size: 7px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
.lb-wrap {
position: relative;
width: 100%;
}
/* 1줄 */
.slide {
display: grid;
position: relative;
width: 100%;
height: 100%;
grid-template-columns: repeat(4, 1fr);
column-gap: 12px;
padding-top: 16px;
padding-bottom: 4px;
margin: 0 auto;
}
.end_soon_txt{
white-space:nowrap;
}
/* 이미지 */
.img_item {
width: 100%;
height: auto; /* Fixed height for all images */
object-fit: cover;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0);
}
.img_item:hover {
filter: brightness(0.8);
}
/* 카드 리스트 */
.collection_card_list {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* 아이템 하단 */
.collection_item_bottom {
display: block;
overflow: hidden;
transition: background 100ms ease-out;
position: relative;
width: 100%;
cursor: pointer;
background-color: white;
border: none;
}
/*텍스트박스*/
.card_text {
width: 100%;
padding: 3px;
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
line-height: 20px;
}
/* 미디어 쿼리 */
@media screen and (max-width: 800px) {
.slide {
grid-template-columns: repeat(3, 1fr);
}
.end_soon {
padding: 0px 13px 0px 13px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-size: 6px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
.can_wait {
padding: 0px 13px 0px 13px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#FF9E2D;
font-size: 6px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
}
@media screen and (max-width: 600px) {
.slide {
grid-template-columns: repeat(2, 1fr);
}
.end_soon {
padding: 0px 12px 0px 12px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-size: 6px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
.can_wait {
padding: 0px 12px 0px 12px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#FF9E2D;
font-size: 6px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
}
.end {
font-size: 12px;
}
.card_text {
font-size: 11px;
}
</style>
<div class="collection_block">
<div class="slide">
<div class="collection_card_list">
<div class="hello-world gif1" onclick="openYouTube1()">
<div class="card_text">숏츠 이름입니다</br> 들어갑니다 내용이에요</div>
</div>
<div class="short_txt_box">
<a class="middle" ></a>
<h5 class="small" ></h5>
</div></div>
<div class="collection_card_list">
<div class="hello-world gif2" onclick="openYouTube2()">
<div class="card_text">숏츠 이름입니다</br> 들어갑니다 내용이에요</div>
</div>
<div class="short_txt_box">
<a class="middle" ></a>
<h5 class="small" ></h5>
</div></div>
<div class="collection_card_list">
<div class="hello-world gif1" onclick="openYouTube1()">
<div class="card_text">숏츠 이름입니다</br> 들어갑니다 내용이에요</div>
</div>
<div class="short_txt_box">
<a class="middle" ></a>
<h5 class="small" ></h5>
</div></div>
<div class="collection_card_list">
<div class="hello-world gif1" onclick="openYouTube1()">
<div class="card_text">숏츠 이름입니다</br> 들어갑니다 내용이에요</div>
</div>
<div class="short_txt_box">
<a class="middle" ></a>
<h5 class="small" ></h5>
</div></div>
<div class="short_form">
<div class="hello-world gif1" onclick="openYouTube1()">
<div class="card_text">숏츠 이름입니다</br> 들어갑니다 내용이에요</div>
</div>
<div class="short_txt_box">
<a class="middle" ></a>
<h5 class="small" ></h5>
</div></div>
</div>
</div>
HTML
복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimeo & YouTube Embed</title>
<style>
.split-screen {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
}
.left-side {
flex: 1.5;
background-color: #8a8a8a;
display: flex;
align-items: center;
justify-content: center;
position: relative; /* 버튼의 위치 기준이 됩니다 */
}
.right-side {
flex: 0.5;
background-color: #e0e0e0;
display: flex;
flex-direction: column; /* Stack widgets vertically */
position: relative; /* To position buttons */
}
.embed-container {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.embed-container iframe {
justify-content: center;
align-items: center;
width: 300px;
height: 100%;
background-color: transparent; /* Ensuring the iframe itself doesn't have a background color */
}
.desktop_shorts {
display: flex;
}
.mobile_shorts {
display: none;
}
@media screen and (max-width: 800px) {
.desktop_shorts {
display: none;
}
.mobile_shorts {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 80vh;
background-color: #8A8A8A;
position: relative;
}
.mobile_shorts .container {
position: relative;
width: 100%;
z-index: 2;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-end;
overflow-x: auto;
}
.mobile_shorts .widgetshorts {
background-color: rgba(0, 0, 0, 0.5);
min-width: 50%;
margin-right: 10px;
}
.mobile_shorts .embed-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
}
.mobile_shorts .widget-image {
width: 60px;
height: auto;
margin-right: 10px;
}
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
margin: 0 auto;
gap: 10px;
}
.widgetshorts {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.5);
}
.widget-image {
width: 140px;
height: auto;
margin-right: 10px;
}
.widget-text {
margin: 0;
color: #fff;
}
/* X 버튼 스타일 */
.back-button {
position: absolute;
top: 10px;
left: 20px;
background-color: #000;
color: #fff;
padding: 10px 20px 10px 20px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
z-index: 10;
}
.nav-button {
position: absolute; /* 버튼을 절대 위치로 설정 */
background-color: white;
color: black;
padding: 10px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
z-index: 10;
top: 50%; /* 수직 중앙 */
left: 92%; /* 수평 중앙 */
transform: translate(-50%, -50%); /* 중앙으로 이동 */
}
.prev-button {
top: 45%; /* 상단에서 10px 위치 */
}
.next-button {
top: 55%; /* 상단에서 10px 위치 */
}
</style>
</head>
<body>
<!-- "x" 버튼 추가 -->
<div class="back-button" onclick="goBack()">X</div>
<div class="desktop_shorts split-screen">
<div class="left-side">
<div class="embed-container">
<iframe id="vimeo-video-desktop" src="https://player.vimeo.com/video/966282542?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" width="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="03. 파리 플리"></iframe>
<!-- 버튼들 -->
<div class="nav-button prev-button" onclick="showPrevContent()">Prev</div>
<div class="nav-button next-button" onclick="showNextContent()">Next</div>
</div>
</div>
<div class="right-side">
<div class="container" id="widget-container">
<!-- 위젯들 -->
<div class="widgetshorts" id="widget-1">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 1</p>
</div>
<div class="widgetshorts" id="widget-2" style="display:none;">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 2</p>
</div>
<div class="widgetshorts" id="widget-3" style="display:none;">
<img src="https://via.placeholder.com/100" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 3</p>
</div>
</div>
</div>
</div>
<div class="mobile_shorts full-screen">
<div class="container">
<!-- 위젯들 -->
<div class="widgetshorts" id="widget-1">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 1</p>
</div>
<div class="widgetshorts" id="widget-2" style="display:none;">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 2</p>
</div>
<div class="widgetshorts" id="widget-3" style="display:none;">
<img src="https://via.placeholder.com/100" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 3</p>
</div>
</div>
<div class="embed-container mobile_shorts">
<div class="embed-container">
<iframe id="vimeo-video-desktop" src="https://player.vimeo.com/video/966282542?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" width="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="03. 파리 플리"></iframe>
<!-- 버튼들 -->
<div class="nav-button prev-button" onclick="showPrevContent()">Prev</div>
<div class="nav-button next-button" onclick="showNextContent()">Next</div>
</div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var optionsDesktop = {
id: 966282542,
width: '100%',
loop: true,
autoplay: true,
muted: true
};
var mobilePlayer = new Vimeo.Player('youtube-video-mobile', optionsMobile);
mobilePlayer.setVolume(0);
mobilePlayer.play().catch(function(error) {
console.error('Error playing the video:', error);
});
});
var desktopPlayer = new Vimeo.Player('vimeo-video-desktop', optionsDesktop);
desktopPlayer.setVolume(0);
desktopPlayer.play().catch(function(error) {
console.error('Error playing the video:', error);
});
var optionsMobile = {
id: 966282542,
width: '100%',
loop: true,
autoplay: true,
muted: true
};
var mobilePlayer = new Vimeo.Player('youtube-video-mobile', optionsMobile);
mobilePlayer.setVolume(0);
mobilePlayer.play().catch(function(error) {
console.error('Error playing the video:', error);
});
});
// 뒤로 가기 함수
function goBack() {
window.history.back();
}
// 위젯 전환 함수
let currentWidgetIndex = 0;
const widgets = document.querySelectorAll('#widget-container .widgetshorts');
const videoSources = [
'https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0&loop=1&playlist=_dDyrDQAfag',
'https://www.youtube.com/embed/2_l5z1yZPwg?autoplay=1&controls=0&loop=1&playlist=2_l5z1yZPwg',
'https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0&loop=1&playlist=_dDyrDQAfag'
];
function showWidget(index) {
widgets.forEach((widget, i) => {
widget.style.display = (i === index) ? 'flex' : 'none';
});
// Sync the video source for both views
const videoSrc = videoSources[index];
const desktopIframe = document.getElementById('vimeo-video-desktop');
const mobileIframe = document.getElementById('youtube-video-mobile');
desktopIframe.src = videoSrc;
mobileIframe.src = videoSrc;
}
function showPrevContent() {
currentWidgetIndex = (currentWidgetIndex > 0) ? currentWidgetIndex - 1 : widgets.length - 1;
showWidget(currentWidgetIndex);
}
function showNextContent() {
currentWidgetIndex = (currentWidgetIndex < widgets.length - 1) ? currentWidgetIndex + 1 : 0;
showWidget(currentWidgetIndex);
}
// 초기 위젯 표시
showWidget(currentWidgetIndex);
</script>
</body>
</html>
HTML
복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimeo & YouTube Embed</title>
<style>
.split-screen {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
}
.left-side {
flex: 1.5;
background-color: #8a8a8a;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.right-side {
flex: 0.5;
background-color: #e0e0e0;
display: flex;
flex-direction: column;
position: relative;
}
.embed-container {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.embed-container iframe {
width: 300px;
height: 100%;
background-color: transparent;
}
.desktop_shorts {
display: flex;
}
.mobile_shorts {
display: none;
}
@media screen and (max-width: 800px) {
.mobile_shorts .container {
display: block; /* 컨테이너가 화면에 보이도록 설정 */
}
.mobile_shorts .widgetshorts {
display: flex; /* 각 위젯을 모바일에서도 보여주도록 설정 */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
margin-bottom: 10px;
}
.mobile_shorts .widget-image {
width: 100px;
height: auto;
}
.mobile_shorts .widget-text {
color: white;
font-size: 14px;
}
}
@media screen and (max-width: 800px) {
.desktop_shorts {
display: none;
}
.mobile_shorts {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 80vh;
background-color: #8A8A8A;
position: relative;
}
.mobile_shorts .embed-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
}
.mobile_shorts .nav-button {
top: 50%;
left: 90%;
transform: translate(-50%, -50%);
}
}
.widgetshorts {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.5);
}
.widget-image {
width: 140px;
height: auto;
margin-right: 10px;
}
.widget-text {
margin: 0;
color: #fff;
}
.back-button {
position: absolute;
top: 10px;
left: 20px;
background-color: #000;
color: #fff;
padding: 10px 20px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
z-index: 10;
}
.nav-button {
position: absolute;
background-color: white;
color: black;
padding: 10px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
z-index: 10;
top: 50%;
left: 92%;
transform: translate(-50%, -50%);
}
.prev-button {
top: 45%;
}
.next-button {
top: 55%;
}
</style>
</head>
<body>
<!-- "x" 버튼 추가 -->
<div class="back-button" onclick="goBack()">X</div>
<div class="desktop_shorts split-screen">
<div class="left-side">
<div class="embed-container">
<iframe id="vimeo-video-desktop" src="https://player.vimeo.com/video/966282542?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"></iframe>
<div class="nav-button prev-button" onclick="showPrevContent()">Prev</div>
<div class="nav-button next-button" onclick="showNextContent()">Next</div>
</div>
</div>
<div class="right-side">
<div id="widget-container">
<div class="widgetshorts" id="widget-1">
<img src="https://via.placeholder.com/150" class="widget-image">
<p class="widget-text">테스트입니다용 1</p>
</div>
<div class="widgetshorts" id="widget-2" style="display:none;">
<img src="https://via.placeholder.com/150" class="widget-image">
<p class="widget-text">테스트입니다용 2</p>
</div>
<div class="widgetshorts" id="widget-3" style="display:none;">
<img src="https://via.placeholder.com/100" class="widget-image">
<p class="widget-text">테스트입니다용 3</p>
</div>
</div>
</div>
</div>
<div class="mobile_shorts full-screen">
<div class="container">
<!-- 위젯들 -->
<div class="widgetshorts" id="widget-1">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 1</p>
</div>
<div class="widgetshorts" id="widget-2" style="display:none;">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 2</p>
</div>
<div class="widgetshorts" id="widget-3" style="display:none;">
<img src="https://via.placeholder.com/100" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 3</p>
</div>
</div>
<div class="embed-container">
<iframe id="youtube-video-mobile" src="https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0&loop=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"></iframe>
<!-- 모바일용 버튼들 -->
<div class="nav-button prev-button" onclick="showPrevContent()">Prev</div>
<div class="nav-button next-button" onclick="showNextContent()">Next</div>
</div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
let currentWidgetIndex = 0;
const widgets = document.querySelectorAll('#widget-container .widgetshorts');
const videoSources = [
'https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0&loop=1',
'https://www.youtube.com/embed/2_l5z1yZPwg?autoplay=1&controls=0&loop=1',
'https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0&loop=1'
];
function showWidget(index) {
widgets.forEach((widget, i) => {
widget.style.display = (i === index) ? 'flex' : 'none';
});
const videoSrc = videoSources[index];
document.getElementById('youtube-video-mobile').src = videoSrc;
document.getElementById('vimeo-video-desktop').src = videoSrc;
}
function showPrevContent() {
currentWidgetIndex = (currentWidgetIndex > 0) ? currentWidgetIndex - 1 : widgets.length - 1;
showWidget(currentWidgetIndex);
}
function showNextContent() {
currentWidgetIndex = (currentWidgetIndex < widgets.length - 1) ? currentWidgetIndex + 1 : 0;
showWidget(currentWidgetIndex);
}
function goBack() {
window.history.back();
}
showWidget(currentWidgetIndex);
</script>
</body>
</html>
HTML
복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimeo & YouTube Embed</title>
<style>
.split-screen {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
}
.left-side {
flex: 1.5;
background-color: #8a8a8a;
display: flex;
align-items: center;
justify-content: center;
position: relative; /* 버튼의 위치 기준이 됩니다 */
}
.right-side {
flex: 0.5;
background-color: #e0e0e0;
display: flex;
flex-direction: column; /* Stack widgets vertically */
position: relative; /* To position buttons */
}
.embed-container {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.embed-container iframe {
justify-content: center;
align-items: center;
width: 300px;
height: 100%;
background-color: transparent; /* Ensuring the iframe itself doesn't have a background color */
}
.desktop_shorts {
display: flex;
}
.mobile_shorts {
display: none;
}
@media screen and (max-width: 800px) {
.desktop_shorts {
display: none;
}
.mobile_shorts {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 80vh;
background-color: #8A8A8A;
position: relative;
}
.mobile_shorts .container {
position: relative;
width: 100%;
z-index: 2;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-end;
overflow-x: auto;
}
.mobile_shorts .widgetshorts {
background-color: rgba(0, 0, 0, 0.5);
min-width: 50%;
margin-right: 10px;
}
.mobile_shorts .embed-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
}
.mobile_shorts .widget-image {
width: 60px;
height: auto;
margin-right: 10px;
}
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
margin: 0 auto;
gap: 10px;
}
.widgetshorts {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.5);
}
.widget-image {
width: 140px;
height: auto;
margin-right: 10px;
}
.widget-text {
margin: 0;
color: #fff;
}
/* X 버튼 스타일 */
.back-button {
position: absolute;
top: 10px;
left: 20px;
background-color: #000;
color: #fff;
padding: 10px 20px 10px 20px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
z-index: 10;
}
.nav-button {
position: absolute; /* 버튼을 절대 위치로 설정 */
background-color: white;
color: black;
padding: 10px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
z-index: 10;
top: 50%; /* 수직 중앙 */
left: 92%; /* 수평 중앙 */
transform: translate(-50%, -50%); /* 중앙으로 이동 */
}
.prev-button {
top: 45%; /* 상단에서 10px 위치 */
}
.next-button {
top: 55%; /* 상단에서 10px 위치 */
}
</style>
</head>
<body>
<!-- "x" 버튼 추가 -->
<div class="back-button" onclick="goBack()">X</div>
<div class="desktop_shorts split-screen">
<div class="left-side">
<div class="embed-container">
<iframe id="vimeo-video-desktop" src="https://player.vimeo.com/video/966282542?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"></iframe>
<div class="nav-button prev-button" onclick="showPrevContent()">Prev</div>
<div class="nav-button next-button" onclick="showNextContent()">Next</div>
</div>
</div>
<div class="right-side">
<div id="widget-container">
<div class="widgetshorts" id="widget-1">
<img src="https://via.placeholder.com/150" class="widget-image">
<p class="widget-text">테스트입니다용 1</p>
</div>
<div class="widgetshorts" id="widget-2" style="display:none;">
<img src="https://via.placeholder.com/150" class="widget-image">
<p class="widget-text">테스트입니다용 2</p>
</div>
<div class="widgetshorts" id="widget-3" style="display:none;">
<img src="https://via.placeholder.com/100" class="widget-image">
<p class="widget-text">테스트입니다용 3</p>
</div>
</div>
</div>
</div>
<div class="mobile_shorts full-screen">
<div class="container">
<!-- 위젯들 -->
<div class="widgetshorts" id="widget-1-mob">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 1</p>
</div>
<div class="widgetshorts" id="widget-2-mob" style="display:none;">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 2</p>
</div>
<div class="widgetshorts" id="widget-3-mob" style="display:none;">
<img src="https://via.placeholder.com/100" alt="Placeholder Image" class="widget-image">
<p class="widget-text">테스트입니다용 3</p>
</div>
</div>
<div class="embed-container">
<iframe id="youtube-video-mobile" src="https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0&loop=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"></iframe>
<!-- 모바일용 버튼들 -->
<div class="nav-button prev-button" onclick="showPrevContent()">Prev</div>
<div class="nav-button next-button" onclick="showNextContent()">Next</div>
</div>
</div>
<script>
let currentWidgetIndex = 0;
const desktopWidgets = document.querySelectorAll('.desktop_shorts .widgetshorts'); // 데스크탑 위젯들
const mobileWidgets = document.querySelectorAll('.mobile_shorts .widgetshorts'); // 모바일 위젯들
const desktopVideoSources = [
'https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0',
'https://www.youtube.com/embed/2_l5z1yZPwg?autoplay=1&controls=0',
'https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0'
];
const mobileVideoSources = [
'https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0',
'https://www.youtube.com/embed/2_l5z1yZPwg?autoplay=1&controls=0',
'https://www.youtube.com/embed/_dDyrDQAfag?autoplay=1&controls=0'
];
function showWidget(index) {
const isMobile = window.matchMedia("(max-width: 800px)").matches;
const widgets = isMobile ? mobileWidgets : desktopWidgets;
const videoSources = isMobile ? mobileVideoSources : desktopVideoSources;
// 모든 위젯 숨기기
widgets.forEach((widget, i) => {
widget.style.display = (i === index) ? 'flex' : 'none';
});
// 비디오 소스 설정
const videoSrc = videoSources[index];
if (isMobile) {
document.getElementById('youtube-video-mobile').src = videoSrc;
} else {
document.getElementById('vimeo-video-desktop').src = videoSrc;
}
}
function showPrevContent() {
const widgets = window.matchMedia("(max-width: 800px)").matches ? mobileWidgets : desktopWidgets;
currentWidgetIndex = (currentWidgetIndex > 0) ? currentWidgetIndex - 1 : widgets.length - 1;
showWidget(currentWidgetIndex);
}
function showNextContent() {
const widgets = window.matchMedia("(max-width: 800px)").matches ? mobileWidgets : desktopWidgets;
currentWidgetIndex = (currentWidgetIndex < widgets.length - 1) ? currentWidgetIndex + 1 : 0;
showWidget(currentWidgetIndex);
}
// 페이지 로딩 시 첫 번째 위젯 표시
showWidget(currentWidgetIndex);
</script>
</body>
</html>
HTML
복사
