0
Good morning, I am developing a website and through it you can incorporate videos from both Youtube and Facebook. Youtube videos adapt perfectly according to the size of the div, the problem is even in Facebook where they appear broken if their height is greater or less than 300 pixels and their width is modified. Here’s a draft of my code:
CSS:
/* css video incorporado */
.embedresize {
max-width: 560px;
margin: auto;
}
.embedresize div {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.embedresize iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.intro #intro .embedresize iframe,
.exit .quizz .embedresize iframe,
.alreadyplayed #intro .embedresize iframe,
.identityset #intro .embedresize iframe,
#notabene .embedresize iframe,
#message_intro .embedresize iframe,
.fancybox_body .embedresize iframe,
#comments .embedresize iframe,
#description .embedresize iframe,
.alreadyplayed .embedresize iframe,
#adserver .embedresize iframe {
max-width: none !important;
}
HTML:
<h1 style="font-weight: 600; font-size: 14px; text-align: center;">Previa:</h1>
<div class="embedresize">
<div>
<iframe src="<?=$row_rsRegistro['vid_iframe'];?>" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true" height="300"></iframe>
</div>
</div>
Here’s how the embedded video gets:
This HTML and CSS code I got from some gringo tutorials on how to get Facebook embedded video on any site. You can make this video responsive without using API’s or use different structures with Back End confirmation?
Try putting
height:auto !important; max-height:300px !important;in the CSS to see if it has any effect... And take the height value from the iframe– hugocsl
Alex something I realized now. You have any idea what this is padding in your code?
padding-bottom: 56.25%;?– hugocsl
As I said this CSS is from some tutorials gringos who say put it there on their sites and the responsiveness work normal.
– Alex Borgmann
This padding is to maintain a ratio of "Aspect ratio" serves to leave the ratio height x width with a value set independent of the screen size. You can read about it here! https://css-tricks.com/aspect-ratio-boxes/ See that with this padding ai you define Div as the ratio 9/16 " Now imagine Instead of 100% top padding, we used 56.25%. That Happens to be a Perfect 16:9 ratio! (9 / 16 = 0.5625). " That’s why you cut the video. Because it comes maybe in 4:3 format... takes the height and padding of the container to see what happens... limit the size in the width maybe. good reading
– hugocsl
The video "disappears", I am developing using Bootstrap 3.3, I tried to use embed-Responsive classes as well but the result is the same.
– Alex Borgmann