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?
Related
I have this piece of code here that shows an embedded youtube video beside a paragraph of text on my website.
<div class="container" style="width: 100%; display: table;">
<div style="width: 60%; display: table-cell; vertical-align: top; margin: 10px;">
Text Goes Here
</div>
<div style="width: 40%; display: table-cell; margin: 10px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fJ9rUzIMcZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
This works as intended on computers, however when it comes to mobile devices the structure obviously doesn't change and we can see a small video player beside a very narrow text.
How can I make it so that the video goes below the text specifically just on mobile devices or narrow browsers? The usage of iframe seems to limit what I want to achieve but I can't think of another way of including an embedded youtube video.
To achieve your goal you need mediaqueries that you use to visualize the elements separately depending on the screen size. So you can make and adapt your own visualizations for each device. You can find a great contribution to mediaqueries and how they work here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
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 making a responsive website and I have a few Youtube videos on it. When I view my site on > 479px resolution, the videos stay at the center, but when I view on phone screen resolution or when I scale down my browser to < 480px, the videos float all the way to the right. Right now Im using text-align: center to center the video.
Here's my code:
.youtube{
text-align: center;
}
<p class="youtube">
<iframe width="560" height="340" src="https://www.youtube.com/embed/Ubl3r5mGRtg" frameborder="0" allowfullscreen></iframe></br>
<iframe width="560" height="340" src="https://www.youtube.com/embed/xgr38LWUf7w" frameborder="0" allowfullscreen></iframe></br>
<iframe width="560" height="340" src="https://www.youtube.com/embed/ylT54zdmGCk" frameborder="0" allowfullscreen></iframe>
</p>
You could add to your css:
iframe { max-width: 100%; }
And maybe fix the height with some media queries.
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 */
}
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.