More than 5 years have passed since last update.

横可変 縦固定でYoutubeを背景動画にする方法

Posted at

01 YTPlayerを使う

02 headに以下挿入

var myPlayer;
jQuery(function () {
var isIframe=function(){var a=!1;try{self.location.href!=top.location.href&&(a=!0)}catch(b){a=!0}return a};if(!isIframe()){var logo=$("<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");$("#wrapper").prepend(logo),$("#logo").fadeIn()}
myPlayer = jQuery("#video").YTPlayer();

03 bodyに以下挿入

<div class="customElement">
    <div class="testText">
<div id="video" class="player" data-property="{videoURL:'youtubeの動画ID',containment:'#customElement', showControls:false, autoPlay:true, loop:true, mute:true, startAt:10, opacity:1, addRaster:true, quality:'default'}"></div> <!--BsekcY04xvQ-->


#customElement {
    width: 100%;
    height: 400px;
    background: rgba(81, 150, 191, 0.60);
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    background: url("images/top/movie01.jpg") no-repeat center center;
    background-size: cover;

#testText {
        position: absolute;
        font-size: 40px;
        text-align: center;
        line-height: 80px;
        color: #fff;
        width: 100%;
        margin-top: 0;

スクリーンショット 2015-08-06 20.46.59.png


Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up