Yerel video stilini yapılandırma

Yerel stil ayarları belgemizde yerel stil seçenekleri hakkında bilgi alın ve örnekleri görün.

Yerel video reklam stili ayarladığınızda video oynatıcı, oynatıcının en boy oranını korumak ve bir HTML öğesinin içinde olabildiğince çok alan kaplamak için öğenin (#%NATIVE_VIDEO_WRAPPER%# makrosu bulunan div, oynatıcıyı tetikler) içine yerleştirilmelidir. Bu nedenle, yerel video biçiminin stili oluşturulurken dikkate alınması gereken üç önemli nokta vardır.

1. Yerel video sarmalayıcıyı içeren div'in boyutunu açıkça belirtin

#%NATIVE_VIDEO_WRAPPER%# makrosunu içeren div'in boyutu, yüzde veya pikseller kullanılarak tamamen CSS ile belirtilmelidir.

.host-div {
   width: 300px;
   height: 200px;
}

2. Dolgudan kaçınmak için video ve kapsayıcı div oranlarına dikkat edin

div kapsayıcısının oranı, video oynatıcının oranından farklıysa videonun etrafında dolgu görünür. Dolgunun rengi şeffaf (mobil uygulama) veya siyahtır (mobil ve masaüstü web). Örnekte, videodan daha büyük bir genişlik:yükseklik oranına sahip bir div kapsayıcısı gösterilmiştir. Dolgusuz bir div kapsayıcısı oluşturmak için kapsayıcının videoyla aynı orana sahip olması gerekir. Video en boy oranı önceden biliniyorsa videoyla tamamen uyumlu olan bir div oluşturmak için aşağıdaki HTML ve CSS idealdir.

Örnek: Videodan büyük div oranı

HTML

---

<div class="video-ratio-wrapper">
  <div class="video">
    #%NATIVE_VIDEO_WRAPPER%#
  </div>
</div>

CSS

---

.video-ratio-wrapper {
  position: relative;
  width: 100%;
}

.video-ratio-wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

3. HTML öğelerinizin video oynatıcınızla nasıl çakıştığını anlayın

Mobil uygulamalarda uygulanan video oynatıcı, her zaman diğer HTML öğelerinin altında oluşturulur. Bu, bilinçli bir davranıştır ve başlık gibi öğelerin videonuzla yer paylaşımlı olarak görünmesini sağlar.

div kapsayıcısında z endeksinin ayarlanması bu davranışı etkilemez ve div kapsayıcısının arka plan renginin ayarlanması div'in tüm video oynatıcıyı kaplamasına neden olur.

Videonuzu sarmalayan div öğelerinin şeffaf olması gerekir. div kapsayıcısı, şeffaf olmayan bir arka plan içeriyorsa videonuzla çakışacaktır.

SDK, videonuzun etrafındaki dolgunun rengini kontrol etmek için bir yöntem sunar ve div kapsayıcısının şeffaf kalmasını sağlar. Bunu yapmak için CSS'nizdeki body öğesinde background-color'ı ayarlayın. SDK, bu değeri videonun etrafındaki dolgunun rengi olarak kullanır.

body {
  background-color: aliceblue;
}