Nic727 Posted October 30, 2014 Share Posted October 30, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted October 30, 2014 Share Posted October 30, 2014 It's not apparent what the error is from the screenshot. Link to comment Share on other sites More sharing options...
Nic727 Posted October 30, 2014 Author Share Posted October 30, 2014 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? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 30, 2014 Share Posted October 30, 2014 If you set the height of the container to auto then it should expand to match the size of the contents. Link to comment Share on other sites More sharing options...
Nic727 Posted October 31, 2014 Author Share Posted October 31, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted October 31, 2014 Share Posted October 31, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now