Оразмеряване на видео плеър

[Dimbadboy]

Здравейте, опитвам се да си направя сайт в който да има div и в този div да зарежда видео от Youtube, което да се разгъва до край на ширина и дължива в div-a. Натъкнах се на лек проблем с оразмеряването на видеото в плеъра. Ще дам линк към снимката най-долу в темата. Проблема ми е има ли начин да направя видето да се разгъва на 100%. Тоест зоните, които са оцветени в лилав цвят да ги няма. Благодаря предварително.

HTML код:

<div class="TestIOI">
<iframe src="https://www.youtube-nocookie.com/embed/AOwRb584r1c?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

CSS код:

.TestIOI{
	position:absolute;
	top:70px;
	left:0px;
	width:100%;
	bottom:0px;
	background-color:#349021;
}

.TestIOI iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Линк към снимката.

PS: Ако уголемя "height" става, но искам видеото да свършва точно до където се вижда самата страница. Още веднъж, ако някой може да ми помогне ще бъда много благодарен.

 

[joTunkiq]

Той пеъра си свършва там, щом логото е най-вдясно. Това, което искаш е разделителната способност, може би ако сложиш друг клип с aspect ration 16:9 ще стане, то ва ми изглежда на 4:3, което е квадрат и няма да стане без да уголемиш height-a.

С една дума, слагай клипове с формат 16:9 :?:

 

[dakata__92]

Той пеъра си свършва там, щом логото е най-вдясно. Това, което искаш е разделителната способност, може би ако сложиш друг клип с aspect ration 16:9 ще стане, то ва ми изглежда на 4:3, което е квадрат и няма да стане без да уголемиш height-a.

С една дума, слагай клипове с формат 16:9 :?:

Прав си! В едно от сайтчетата които посещавам това е кода на страницата:



Here is one approach that maintains a 16:9 aspect ratio:

The trick is to absolutely position the iframe element relatively within the parent. Give the iframe a width and height of 100% and use a padding-top value of 56% on the parent element to retain the aspect ratio. (Here is a live example)

HTML

<div class="video">
    <iframe>
       
    </iframe>
</div>

CSS

[css].video {
padding-top: 56%;
position: relative;
}

.video iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

[/css]

Прочети подържащите тагове на съпорта:
https://support.google.com/youtube/answer/146402?hl=en
https://www.youtube.com/yt/dev/bg/api-resources.html
https://www.youtube.com/watch?v=wfDbAq09cY0 - ако клиповете са си твои.


https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
http://yetti.co.uk/blog/articles/responsive-iframe-objects-and-embeds.html