How can I set up mediaelement.js to scale videos down for small screen sizes, but not to scale them up above their actual size? (Other than wrapping it in a correctly sized div, which is what I will fall back to if I can't find a better solution.)
I've tried setting style="max-width: 100%; and this works in Firefox using videos on my own server, but in Chrome, and in both Firefox and Chrome when linking to YouTube videos, the videos will scale up to fill the container regardless of the width="" and height="" values set for the <video> tag.
I'll give an example of my HTML and the first part of the output. The following:
<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video>
Produces this in Firefox (which is what I want):
<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video>
And this in Chrome (which is not what I want):
<div id="mep_0" class="mejs-container svg mejs-video" style="width: 864px; height: 648px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video width="864" height="648" style="max-width: 100%; width: 100%; height: 100%;" src="http://example.com/video.mp4"></video>
Is there an accepted method for accomplishing this?
If you use the Firefox output code
<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video>
in your original script, it should fix the problem and keep the output code consistent across Firefox and Chrome.
Related
I've got two codes and I don't know why the use of height=100% works only on image? in other cases it does nothing and the content choose the minimum height
the object ignore it but not the image.
<section id="corps">
<object data="images/test.pdf" type="application/pdf" width="100%" height="100%">
</object>
<img src="images/test.png" width="90%" height="90%">
</section>
And plus, Why width and height property works in html without style = "..." but others like min-height needs it. Is it just because html support these?
Thanks!
<style>
#corps{ height: Xpx} //replace X with the value that suits you
#corps object{height: 100%} //Now you'll get the 100% height
</style>
Alternatively, if you use position: absolute then height: 100% will work just fine.
About why <img src="images/test.png" width="90%" height="90%"> works, because height and width are HTML5 properties for images.
You can achieve the same thing by using <img src="images/test.png" style="width: 90%; height: 90%;">, Now this is CSS.
The following code is working well except for the the size of the YouTube player. I cannot resize it to the size I want.
I tried to put width="150" and height="100" in iframe but nothing happened.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/q6xWV-uDl5E?autoplay=1" allowfullscreen>
</iframe>
</div>
Works fine for me? Here is the jsfiddle to prove that. I also believe you might be missing px thats why it's not working for you.
JsFiddle
and here is the code:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/q6xWV-uDl5E?autoplay=1" width=150px
height=100px allowfullscreen>
</iframe>
</div>
px doesn't matter if u write only as width="150" height="100",it works good,if you do not pass px than by default it gets to pixels.
the size u wants is not getting beacause in class="embed-responsive embed-responsive-16by9" so it is using 16by9,it is the aspect ratio which are used by it you can also pass other ratios such as 1by1 , 21by9, 4by3,etc
here for youTube video: width="560" height="315", the ratio is 16:9
width="640" height="498", the ratio is 4:3
for different ratios height and width are different,you can adjust it by setting different width and height as per ratios
if u want the size as per your width and height than remove class="embed-responsive embed-responsive-16by9" and add width and height you wan inside your iframe tag
like [[ src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"]]
and close the iframe tag,works fine.
{div class="responsive-embed"}
{iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen }{/iframe}
{div}
try this and u get your answe use open angular bracket instead of curly
<div class="wrapper">
<div class="container">
<iframe src="there is path of your iframe"></iframe>
</div>
</div>
.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
I'm using this plugin to display a video grid. Clicking a grid item pops up a video container where you can view a video. The issue I'm having using this plugin is, it works great for videos with aspect ratio 16:9. However, videos with height greater than the width, the video container stretches vertically and goes off screen and the video looks choppy and zoomed. How do I fix the size of the container so the video doesn't get stretched.
Here's the HTML for the video container:
<div class="cbp-popup-wrap cbp-popup-lightbox cbp-popup-lightbox-isIframe cbp-popup-ready" data-action="close" style="display: block;"><div class="cbp-popup-content">
<div class="cbp-popup-lightbox-title">
<a href="/video/179/sdvsdd.aspx">sdvsdd
<div class="cbp-popup-lightbox-iframe">
<video controls="controls" height="auto" style="width: 100%">
<source src="/stream/stream.ashx?f=p1b0aqijn7115fsud1o2n9m53i83_5.mp4&u=kahmed&max=3000" type="video/mp4">Your browser does not support the video tag.</video>
</div>
</a>
</div>
</div>
<div class="cbp-popup-loadingBox">
</div>
<div class="cbp-popup-navigation-wrap">
<div class="cbp-popup-navigation">
<div class="cbp-popup-close" title="Close (Esc arrow key)" data-action="close"></div>
<div class="cbp-popup-next" title="Next (Right arrow key)" data-action="next" style="display: block;">
</div>
<div class="cbp-popup-prev" title="Previous (Left arrow key)" data-action="prev" style="display: block;">
</div>
</div>
</div>
</div>
Here's what the video with height greater than width looks like:
Video with the right size looks like this (which is what I want for the above video)
If I make the height of <video> 100%, the video disappears. Setting it to a fixed height shrinks the video but the container stays the same size as shown below:
The guy from support instructed me to use the below property:
.cbp-popup-lightbox-isIframe .cbp-popup-content {
width: 35% !important;
}
Which makes the video look as below
But this is not what I want. I want the container to remain the fixed size and make the video fit into the container. I have been stuck on this for a while now and haven't figured out how to do it.
Any help or suggestion is appreciated.
Try this:-
<video width="400" height="300" ...
<iframe width="400" height="300" ...
<object width="400" height="300" ...
<embed width="400" height="300" ...
link:-https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
or
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Bootstrap offers some classes allowing you to keep your videos within their container and with the correct dimensions. Those classes are embed-responsive and then either embed-responsive-16by9 or embed-responsive-4by3.
See this.
I'm trying to embed a video inside an image, the challenge is that the page is responsive. The video looks in place on full screen, however it moves out of the box when resolution changes.
So I want the video to be inside the image frame at all sizes. Should I use #media or is there another way?
<div class="col-md-4">
<img class="img-responsive" style="width:344px;height:780px"
src="Images/mywork-images/cicis/cicis-mobile.jpg">
<div class="player">
<iframe src="https://player.vimeo.com/video/139805324"
width="290" height="290" frameborder="0"
webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>
</div>
</div>
.player{
position: relative;
height: 0;
bottom: 565px;
left: 21.3%; /* 110px */
}
I am building a video page and I would like computer screens to show the 560X315, however, when I add the responsive code and dimensions as stated, the video is not responsive. When I remove the height/width dimensions, the video shrinks to almost thumbnail size.
<div class="videoWrapper embed-responsive-16by9" style="width: 100%; height: 100%; text-align: center;" data-videoid="10466530-95d9-d044-a0c4-be94a145d863"><iframe width="560" height="315" align="center" src="https://www.youtube.com/embed/o4PwOUDFhqM?list=PL9T_50FV6xCo5Y4Jr0vfSUaqrS0cZ6_yD" frameborder="0" allowfullscreen="" overflow="hidden"></iframe></div>
How do I get the video to display on the screens as the 560x315 but still be responsive?