newcoder1010 Posted February 24, 2018 Share Posted February 24, 2018 (edited) Hello, I would like to place the video 70% width of the screen and height should be adjusted by itself based on the screen size. HTML: <div class="field field-name-field-youtube field-type-video-embed-field field-label-above"> <div class="field-label">Youtube 1: </div> <div class="field-items"> <div class="field-item even"> <div class="embedded-video"> <div class="player"> <iframe class="utube" src="//www.youtube.com/embed/fPWzv" frameborder="0" allowfullscreen="" width="700" height="700"></iframe> </div> </div> </div> </div> </div> CSS: iframe.utube { width: 100%; } Now it is taking entire computer screen. I changed from 100% to 70%. Desktop shows the entire video. But as I am making responsive, video is being responsive but cover page starts cropping. That means video shows 70% and cover page shows part of the cover page. How can I make it 70% width by a responsive height (please recommend) without cropping the cover page content? Thanks. Edited February 24, 2018 by newcoder1010 Link to comment Share on other sites More sharing options...
Ingolme Posted February 24, 2018 Share Posted February 24, 2018 I'm not sure what you mean by cover page, but there is a way to make the height scale proportionally to the width in an iframe. Because it's an iframe, the aspect ratio of the video is not known. If you do know the aspect ratio beforehand, a technique to keep it responsive is to wrap it in a container and use a percentage padding. To calculating the necessary padding, take the aspect ratio of the video, which might be 16:9, then solve the equation 16/9 = 100/x -> x = 100 * 9/16 = 56.25. Now you can wrap the video in a container with the desired width and the percentage height: <div class="video-wrapper" style="padding-bottom:56.25%"> <iframe src="//www.youtube.com/embed/fPWzv" frameborder="0" allowfullscreen="" width="700" height="700"></iframe> </div> .video-wrapper { /* Choose your width, or don't specify it to take the full width of the parent container */ width: 70%; /* The following rules are necessary */ height: 0; position: relative; overflow: hidden; } /* Force the iframe to occupy all the space in the parent element */ .video-wrapper iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } Link to comment Share on other sites More sharing options...
newcoder1010 Posted February 24, 2018 Author Share Posted February 24, 2018 1. .player { width: 70%; HEIGHT: 0; POSITION: ABSOLUTE; overflow: hidden; padding-bottom: 56.25%; } 2 iframe { /* width: 70%; */ /* height: 100%; */ position: absolute; top: 0; right: 0; left: 0; border: 0; } 3 html looks still same as before. 4. How page looks now. https://drive.google.com/open?id=1O_9oIX2pzk872zkBczEbY4B1RqRTf3zX Its overlapping on another field. If you visit the link, you will notice you tube field is overlapping body field. Also iframe not responsive. Cover page that I am referring to as "when you visit a page you see a video with video cover. cover may show one person and texts. As I am making responsive I want video and video cover to be responsive. Not just the video itself. That means I should see the video cover of person and texts regardless of the screen size. https://drive.google.com/open?id=1l6b1Dglkc5pDVZjOKRycO83OujYBCnqt Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted February 24, 2018 Share Posted February 24, 2018 Why did you give the player an absolute position? Give it a relative position. Absolute positioning breaks the page flow and makes layouts a nightmare to work with. Link to comment Share on other sites More sharing options...
newcoder1010 Posted February 24, 2018 Author Share Posted February 24, 2018 (edited) This one worked for me. .player { position: relative; padding-bottom: 35%; padding-top: 35px; height: 0; overflow: hidden; } .player iframe.utube { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } For mobile, I changed the padding bottom to 55% and for tablet to 45%. Questions: I did not understand the meaning of padding bottom and padding top. What is 16:9 ratio? How do you know the ratio? 16 and 9 are width and height? Thank you. Edited February 24, 2018 by newcoder1010 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