Skip to main content

VNG-939: Aspect Ratio Tests (iframe)

tip

Right click the player. If the Viostream logo is monotone blue, then you are testing the 2025 player. If it is gradients of blue, then you are testing the wrong thing.

Landscape​

16:9​

<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkgqe"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

35mm Anamorphic (2.39:1)​

<div style="padding-bottom:41.84%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkgc6"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

35mm Standard (1.85:1)​

<div style="padding-bottom:54.05%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkr8x"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

16:10​

<div style="padding-bottom:62.50%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkrer"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

4:3​

<div style="padding-bottom:75.00%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkgqt"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

5:3​

<div style="padding-bottom:60.00%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkqt7"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

Portrait​

4:5​

<div style="padding-bottom:125.00%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkq1u"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

9:16​

<div style="padding-bottom:177.78%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkq1e"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

Square​

1:1​

<div style="padding-bottom:100.00%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxqkrg4"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

360​

2:1 ??​

<div style="padding-bottom:50.00%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/rxqknowrxxe5ut"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>

Live!​

tip

Here's a good command to stream some content to the player:

ffmpeg -re -i ~/viostream-test-samples/surfing-loop.mp4 \
  -vf drawtext="fontfile=monofonto.ttf: fontsize=96: box=1: boxcolor=black@0.75: boxborderw=5: fontcolor=#2492ff: x=(w-text_w)/2: y=((h-text_h)/2)+((h-text_h)/4): text='%{localtime\:%H\\\\\:%M\\\\\:%S}'" \
  -vcodec libx264  \
  -f flv \
  'rtmps://169e919a35c5.global-contribute.live-video.net:443/app/sk_ap-northeast-1_eCXU387xOFqW_sQeBK5dpxhCyvzxr5N68V183B9kiNU'
<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
                <iframe
                  width="100%"
                  height="100%"
                  src="//play.dev1.viostream.io/iframe/l-rq98d5z"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowfullscreen
                  frameborder="0"
                  style="position:absolute; top:0; left: 0">
                </iframe>
              </div>