Problem with video

[Nic727]

Hi, for my school, I have to insert video in my HTML page and I have a problem with embeded video. That's a screenshot of my problem : http://image.noelshack.com/fichiers/2014/44/1414638917-vid.jpg

 

I would like to know what's the error in the code :

 

HTML5

<div class="box vid1">                <iframe src="http://new.livestream.com/accounts/1506344/events/1569186/player?width=560&height=315&autoPlay=false&mute=false" width="560" height="315" frameborder="0" scrolling="no"> </iframe>            </div>

CSS3

.vid1{background-color: #000;background-color: rgba(0, 0, 0, 0.5);float:left; width:49%;height:285px ;margin-left: 3px;margin-top: 170px;}iframe {width: 100%;height: 100%;}

It's a livestream video, but I have the same problem with a vimeo or youtube video. But no problem with local video with the video tag.

 

Thank you

 

 

PS: Maybe it's because my website is not online and only local?

Edited October 30, 2014 by Nic727

[justsomeguy]

It's not apparent what the error is from the screenshot.

[Nic727]

Hi,

 

I fixed the problem. The problem was that my video was too small in height. It was rectancle and the video played with black bar on each side...

 

I fixed the problem in the css, by adding a class to the video in Iframe and modified the height from here.

 

Do you know if can put the video in a box and the box take the same height as the video?

[justsomeguy]

If you set the height of the container to auto then it should expand to match the size of the contents.

[Nic727]

It could work, but no... I don't know why, but my video is still squeezed. My video is supposed to be 560px per 315px, but it appear to be just 50px of height... Whatever, I put a height of 400px to my box and I have a good video size. It's just a school exercice and I will be better the next time. -------------------------------------- Ok I think I found a solution to my problem : I changed some of the CSS code :

.vid1{background-color: #000;background-color: rgba(0, 0, 0, 0.5);float:left; width:49%;height: auto;margin-left: 3px;}.video1{margin: 0 auto;display: block;}iframe {	width: 100%;}

.video1 was already there, but I deleted Iframe height and put height to auto in .vid1 I tried Iframe with max-width: 100%; but it's doing the same thing as width: 100%; A picture of now : http://image.noelshack.com/fichiers/2014/44/1414720928-vid2.png And do you know how can I center the video in the center or making the box the same size as the box on the left? (I can draw you something if you want to understand) thank you Edited October 31, 2014 by Nic727

[justsomeguy]

In order to make the boxes the same size I think you'll need to put them both inside a container, and then set the height of the video to 100%. That should make it fit the container, which will change its height according to the other box.