bootstrapを使用しており、YouTubeビデオをバックグラウンドに設定したい
私はこれを見つけました。 YouTubeのビデオを使用するようにこのコードを変更するにはどうすればよいですか?との交換は機能しません
@import url('http://fonts.googleapis.com/css?family=Oswald');
body {
margin: 0;
padding: 0;
background-attachment: fixed;
background-size: cover;
}
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
<video autoplay="" loop="" class="fillWidth fadeIn animated" poster="https://s3-us-west-2.amazonaws.com/coverr/poster/Traffic-blurred2.jpg" id="video-background">
<source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Traffic-blurred2.mp4" type="video/mp4">
</video>
私は良い解決策を見つけました こちら 。
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
body
にそれらの行を追加します。ID番号を変更します。
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
Youtube API + CSSを使用して、フルスクリーンのyoutubeビデオの背景を構築できます。
HTMLマークアップ:
<div class="page">
<div class="video-bg">
<div id="videoPlayer" data-videoid="b0r_dH7jfOM"></div>
</div>
<div class="content">
<h1>Video Player background</h1>
<h3>Full screen youtube video player in background.</h3>
</div>
</div>
CSS:
.page {
position: relative;
overflow: hidden;
}
.page .video-bg {
width: 100%;
height: 0;
padding-bottom: 56.25%;/* Aspect ratio */
position: absolute;
}
.page .video-bg iframe {
border: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page .content {
position: relative;
z-index: 1;
}
Youtube APIを追加: https://www.youtube.com/iframe_api
JS:
jQuery(function () {
// Youtube player
window.videoPlayer;
window.onYouTubeIframeAPIReady = function () {
var videoPlayerId = $('#videoPlayer').attr('data-videoid');
window.videoPlayer = new YT.Player('videoPlayer', {
height: '1080',
width: '1920',
videoId: videoPlayerId,
playerVars: {
'controls': 0,
'autoplay': 1,
'mute': 1,
'loop': 1,
'showinfo': 0,
'modestbranding': 1
},
events: {
'onReady': onVideoPlayerReady,
'onStateChange': onVideoPlayerReady
}
});
}
function onVideoPlayerReady(event) {
videoPlayer.playVideo();
}
});
皆さんこんにちは、YouTube Embed APIに基づいて作成した再利用可能なシンプルなjQueryプラグインです。使い方もとても簡単です。実際に見ることができます here 。
<div id="ytbg" data-youtube="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
$('[data-youtube]').youtube_background();
});
</script>
GitHub のコード
Youtubeの埋め込み動画を使用して、id = "video-background"を配置し、高さ/幅を削除するだけです。
<iframe id="video-background" src="https://www.youtube.com/embed/BrCKvKXvN2c?list=RDgfwMBzGA_Jo" frameborder="0" allowfullscreen></iframe>