Video background

Hi! YouTube player is a bit different. What I found is that it will show YouTube branding for a few seconds every time the video starts (there is no way to disable this, or at least I couldn’t find one)

Here is the code for YouTube:


<style>
.video-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-left: 0;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
</style>
<div class="video-container">
   <iframe src="https://www.youtube.com/embed/XHOmBV4js_E?playlist=XHOmBV4js_E&controls=0&rel=0&showinfo=0&playsinline=1&modestbranding=0&autoplay=1&enablejsapi=1&widgetid=1&mute=1&loop=1&html5=1" style="background-color: transparent" width="100%" height="100%" frameborder="0" allow="autoplay; webkitallowfullscreen mozallowfullscreen fullscreen" allowfullscreen="" data-ready="true"></iframe>    
</div>

You need to replace the Video ID( + Playlist ID) with your Video ID.

4 Likes