text 171003背景に动画自动再生，再生ボタンから动画ポップアップ（どちらも同じ动画でYOUTUBE）

Posted 2021-05-03

iframe {
	width: 100% !important;
	margin-left: 0 !important;
}

/*動画部分*/
.big-background {
	z-index:550;
	text-align:center;
	height:85vh;
	position:relative;
	overflow:hidden;
	background-position:center bottom;
}

/*スマホの時に表示する画像部分*/
.big-background-default-image {
	background:url(../images/home/img_main_slider01-pc.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	height:765px;
	width:100%;
	z-index:0;
	backface-visibility:hidden;
	@include mq(tab) {
		height:400px;
	}
	@include mq(sp) {
		height:320px;
	}
	.box_caption {
		top: 140px;
		@include mq(tab_sp) {
			top: 30px !important;
		}
	}
}

.mbYTP_wrapper {
	position: static !important;
}

#wrapper_mbYTP_bgndVideo {
	position: static !important;
}

.big-background {
	position: relative;
	overflow: hidden;
	.box_caption {
		width: 100%;
		position: absolute;
		top: 140px;
		left: 50%;
		transform:translateX(-50%);
		-webkit-transform:translateX(-50%);
		text-align: center;
		@include mq(tab_sp) {
			top: 70px;
		}
		@include mq(sp) {
			top: 30px;
		}
		p.note {
			color: #fff;
			@include cV(margin-bottom, 40px, 10px, 10px);
		}
		h1 {
			@include cV(margin-bottom, 60px, 30px, 20px);
			@include mq(tab_sp) {
				width: 40%;
				text-align: center;
				margin: 0 auto 20px auto;
			}
			@include mq(sp) {
				width: 40%;
				text-align: center;
				margin: 0 auto 15px auto;
			}
		}
		h3 {
			color: #fff;
			font-weight: normal;
			text-shadow: 0px 0px 27px rgba(#728acf, 0.75);
			@include fsz(40);
			@include cV(margin-bottom, 20px, 10px, 8px);
			line-height: 1;
			@include mq(tab_sp) {
				@include fsz(28);
				white-space: nowrap;
			}
			@include mq(sp) {
				@include fsz(22);
				white-space: nowrap;
			}
			span {
			}
		}
		h4 {
			color: #fff;
			font-weight: normal;
			text-shadow: 0px 0px 27px rgba(#728acf, 0.75);
			@include fsz(80);
			line-height: 1;
			@include mq(tab_sp) {
				@include fsz(50);
				white-space: nowrap;
			}
			@include mq(sp) {
				@include fsz(42);
				white-space: nowrap;
			}
		}
		.box_movie {
			text-align: center;
			z-index: 99 !important;
			background-size: 100%;
			width: 80px;
			height: 80px;
			cursor: pointer;
			transition: all .2s;
			margin: 50px auto;
			@include mq(sp) {
				margin: 15px auto 0;
			}
			&:hover {
				opacity: .8;
			}
			p {
				width: 100%;
				height: 100%;
				display: block;
				a {
					width: 100%;
					height: 100%;
					display: block;
					text-decoration: none;
					@include mq(sp) {
						img {
							width: 60px;
							@include mq(sp) {
								width: 100%;
							}
						}
					}
					span {
						color: #fff;
						// font-family: $times;
						font-size: 1.1em;
						line-height: 1;
						text-shadow: 1px 1px 10px #000;
					}
				}
			}
		}
	}
}

<link href="./css/magnific-popup.css" rel="stylesheet" type="text/css" media="all">
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/device.min.js"></script>
<script src="./js/jquery.mb.YTPlayer.js"></script>
<script src="./js/custom.js"></script>
<script>
$(function(){
	$(".player").mb_YTPlayer();
});
</script>

<div class="big-background">
	<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=yo_ZL2uvlYA&list=RD-L9dqdDX9Ow&index=7',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>
	<div class="box_caption">
		<p class="note">沖縄・恩納村のホテルコンドミニアム</p>
		<h1><img src="<?php echo LOCATION_FILE?>images/header/logo.png" alt="ホテルコンドミニアム 土花土花"></h1>
		<h3>ホテルコンドミニアム <span>2017</span>年 <span>1</span>月</h3>
		<h4>GRAND OPEN</h4>
		<div class="box_movie">
			<p><a class="popup-iframe" href="https://www.youtube.com/watch?v=yo_ZL2uvlYA?autoplay=0"><img src="images/home/ic_play.png" alt="PLAY MOVIE"></a></p>
		</div>
	</div>
</div>

<script type="text/javascript" src="./js/jquery.magnific-popup.min.js"></script>
<script>
$(function(){
	$('.popup-iframe').magnificPopup({
		type: 'iframe',
		mainClass: 'mfp-fade',
		removalDelay: 200,
		preloader: false
	});
});
</script>

色々なプラグイン試しましたがこれが一番マシかな、、
もっとよいのありそうだけれども。
画面全体の背景に入れる仕様のものが多く調整すればいけたのかもだがしきらず断念。
最終的にぽいのに出会うがこちらも一苦労で無理やり導入
ポップアップはパーム流用
▼ videobackground
http://yachin29.hatenablog.com/entry/2016/06/27/035348_1


下記違いは実機で見ると一緒？だが何故か前者はディベロッパーツールでの可変の確認ができない、、
どちらも(今回導入分も)sp,tabは動画なし、となっている
▼動きがこれに近い
https://www.anaintercontinental-manza.jp/
▼でもこっちにしたかった
http://www.hotel-hiranoya.co.jp/
▼結果
http://west02.ab-ss.com/dokadoka.jp/html/