HTML5、上にコンテンツを追加したときに背景ビデオが実行されない

Question

githubで簡単なポートフォリオページを作成していて、HTML、CSS、およびJSを使用しています。 私は自分のページに4つのセクションを持ち、ポートフォリオをナビゲートするスクロール機能を作成しました。 ページの最初の（自宅の）セクションに背景ビデオを追加しました。ボディー・タグに直接追加したところ、うまく動きました。しかし、私は "ホームセクション"のバックグラウンドである必要がありました。最終的にホームページに合わせて正しく整列させたとき、それは再生されませんでした。 背景は静止画ではなく、poster = "./ videos/Lonely-Blue.jpg"ではなく、alt画像として接続しています。これは、再生を開始しないことを意味します。私はまだうまくいきましたが、私は主にビデオをHTMLとCSSで配置してテストしました。

ここにHTMLスニペットです：ビデオの上部のナビゲーションバーには罰金しばらく働いた

#bg-vid { 
    position: absolute; 
    z-index: -1; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
} 

#homeSection { 
    z-index: -2; 
} 

#wrapper { 
    width: 100%; 
    margin: 0 auto; 
    padding: 60px; 
} 

.home{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 99; 
    width: 100%; 
    margin: 0 auto; 
    padding: 40px;*/ 
    /*background-color: rgba(0,0,0,0.6);*/ 
} 

：

<ul id="myMenu"> 
    <li data-menuanchor="welcome" class="active"><a href="#welcome">Home</a> </li> 
    <li data-menuanchor="about"><a href="#about">About</a></li> 
    <li data-menuanchor="projects"><a href="#projects">Projects</a></li> 
    <li data-menuanchor="contact"><a href="#contact">Contact</a></li> 
</ul> 

<div id="fullpage"> 

    <div class="section" data-menuanchor="welcome" id="homeSection"> 
    <div id = "bg-vid"> 
    <video preload playsinline autoplay muted loop poster="./videos/Lonely-Blue.jpg" id="bgvid"> 
     <source src="./videos/Lonely-Blue.webm" type="video/webm"> 
     <source src="./videos/Lonely-Blue.mp4" type="video/mp4"> 
    </video> 
    </div> 
    <div id="wrapper" class="home"> 
     <h1 id ="dbg">Diana B. Gobar</h1> 
     <h5>Full Stack Web Developer. Artist. Curious human.<br><span id="highlight">Get to know me: </span><span id="altFaves"> ...</span></h5> 
    </div> 

ビデオや家庭セクションのCSSそれは再生されましたが、ホームセクションでビデオのサイズを調整し、その上に「ラッパー」コンテンツを追加すると、開始されません。

Answer 1

スニペット後 挿入

<script> 
    // assuming you're using jQuery 
    $('#bg-vid video')[0].play() 
</script>