2017-02-05 1 views
0

부트 스트랩을 사용하고 있는데 배경에 YouTube 동영상을 설정하고 싶습니다.배경에 YouTube 동영상 설정

발견했습니다. YouTube에서 동영상을 사용하려면이 코드를 어떻게 바꿀 수 있습니까? 당신은 유튜브에서 임베디드 비디오를 사용하고 단지 ID = "비디오 배경을"넣어 을 폭 높이/

<iframe id="video-background" src="https://www.youtube.com/embed/BrCKvKXvN2c?list=RDgfwMBzGA_Jo" frameborder="0" allowfullscreen></iframe> 

Explained HERE 제거 할 수 있습니다

@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>

+0

내 iFrameless을 확인/JS/CSS는 솔루션 https://stackoverflow.com/questions/41616179/youtube-video-header-background/45377998#45377998 – 350D

답변

0

좋은 해결책을 찾았습니다. here. 여기

.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; 
} 
2

로 교체하는 것은 작동하지 않습니다

1

body에 해당 라인을 추가하기 만하면됩니다. 어.

<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>