Parallax Video Ekleme Düzgün Çalışan

İNDEX'e PARALLAX VİDEO GETİRİR

Eklemek istediğimiz videoyu önce converted yapıp, dosya menüsünden mp4 videoyu ekliyoruz. Eklemek istediğimiz videonun linkini translate alanında VideoLink 'e yapıştırırsak video olarak çalışacak. Translate alanında VideoAlanBaslik ve VideoAlanMetin alanlarına ekleyeceğiniz içerik ise vidoeonun üstünde görünecektir.

HTML

    <section class="videotanitim hidden-xs">
        <video autoplay="" poster="bg.jpg" id="bgvid" loop="" muted="">
            <source src="@Partial.Translate("VideoLink", dilk)" type="video/mp4">
        </video>
        <div id="tema" class="tip-tablo">
            <div class="hucre hucre-ortala">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h1 class="borderme">@Partial.Translate("VideoAlanBaslik", dilk)</h1>
                            @Partial.Translate("VideoAlanMetin", dilk)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS

.videotanitim {
    width: 100%;
    height: 70vh;
}
video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url(/Resim/Upload/bg3.jpg) no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
#tema {
    color: white;
    width: 100%;
    height: 50vh;
    padding: 2rem 0;
}
.borderme {
    border-bottom: 1px solid white;
    padding-bottom: 10px;
    color:#FFFFFF;
}
.controller {
    background: none;
    border: 1px solid white;
    border-radius: 3px;
    position: absolute;
    left: 15px;
    top: 35px;