I am trying to include a YouTube video in my website, but i am struggeling to get an aspect ratio of 16:9 on my iframe.
My problem is, I am working with a fixed height, but am flexible in my width. As this is a rather unusual case, I cannot seem to find a solution to my problem in any documentations, or on other StackOverflow questions.
Those all have a fixed width, and are then using padding-bottom: 56,25%; to fith the height.
I am using bootsrap classes to style my HTML, but I still apply a style tag here and there, to customize the design, that is why the code I have included below might seem a bit messy.
Next to the iframe (right side) there should be another div element, which is marked in the code with the id="text-next-to-iframe"
I have tried using said method of including a specific padding in a div surronding my iframe, and then setting the width and height of the actual iframe to 100% as you would do in a fixed height cenario, but that did not work.
I have also tried to set my iframe height to 29vh (the height I need it to be) and setting the width to different vw-values (trying to find the right value), but I ended up with the iframe not showing at all with both methods.
<body style="height: 100vh; overflow: hidden;">
<div class="container-fluid float-md-right mt-2" style="max-width: 79%; height: 100vh;">
<div class="d-flex float-left mt-2 col-md-9" style="height: 29vh; border: 1px solid black;">
<iframe id="YTPlayer" height="100%" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>Video wird geladen...</iframe>
<div id="text-next-to-iframe">
<h2>
<img alt=" " src="./includes/images/BAUMorg.png" style="width: 10%;"/>
BAUMorg
</h2>
<a class="btn btn-outline-danger" href="http://www.youtube.com/channel/UC-HWN5WLWQPPIHB3dwQ9atQ?sub_confirmation=1" role="button" target="_blank" style="width: 10vw; font-size: 25px; align: center;">
<i class="fa fa-youtube-play"></i>
Subscribe
</a>
</div>
I hope I didn't misunderstand this question but hopefully, this will help.
To configure the aspect ratio you want to divide the screen or container width by 16 and multiply that result by 9 to get your height.
screenWidth = containerWidth / 16
screenHeight = screenWidth * 9
Vh is relative to 1% of the viewport, and you said you need 29vh for your height. So we need to do this in reverse to get the opposite (width).
screenHeight = 29vh
screenWidth = (screenHeight / 9) * 16
which is equal to 51.5 if we drop the trailing 5's and round up it is 52vh.
Hope this helps.
<style>
iframe{
width: 52vh;
height: 29vh;
}
</style>
<iframe id="YTPlayer" src="https://www.youtube.com/embed/t2ByLmLnYJ8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Related
So I want to make an iframe for a page that would display a selection of teas and herbal teas, and I want the options on the left in another iframe. Though, it's been so long I haventdone that and I oly didit with DreamWeaver before (I'm unexperienced so I followed a teacher's tutorial), so the software generated most of the code, really. Could anyone help me please? Right now, here's the iframe's code along with the banner:
<div class="container">
<img src="images/bannersite.png" alt="Banner" style="width:100%;">
<div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
<span style="color: #B3D1B3;">Ma</span><span style="color: #404040;">Thé</span>
</div>
</div>
<iframe src="accueil.html" style="width: 99.8%;">
</iframe>
Here's what it looks like:
As you can see, there's a scrolling bar below, and that's because for some reason theiframe decided it would continue on the left of the banner's right end, and I don't want that. I want the iframe and the banner to both fit the whole screen.
Here's what I would like to do but have no clue how:
Thanks for anyone who's willing to help me.
Please take a note, iframes are not good for SEO. It's much better to use java script or jquery driven pieces of code. Google and others are not trustibg to iframe, making yuor website rating a lot decrese.
Have a look at this codepen, I think it does what you are looking for.
https://codepen.io/larrytherabbit/pen/mdPGzdm
I edited your code a bit and please read the comments I made for you to better understand the new lines of code. There is a HTML code and a CSS code that applies to it, with classes (they begin with a ".")
HTML
<div class="container"> <!-- this is the container for the picture and the "MaThé" text -->
<img src="https://images.all-free-download.com/images/graphicthumb/sunflower_background_03_hd_picture_165827.jpg" alt="Banner">
<div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
<span style="color: #B3D1B3;">Ma</span>
<span style="color: #404040;">Thé</span>
</div>
</div> <!-- top header container closes here -->
<div class="flex-container"> <!-- this is the container for the sidebar and the iframe on the right -->
<div class="sidebar">
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
<iframe src="https://www.youtube.com/embed/sJIjIMMIoSw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
CSS
.container img {
width:100%;max-height:250px;
}
.bigtxt {
font-size:50px;
}
.flex-container { /* the display attribute set to flex creates a "flexbox" display, please see here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox */
display:flex;width:100%;
}
.sidebar { /* this container is also set to flex, but here we change the flex-direction to column for the buttons to display in a column */
display:flex;flex-direction:column;height:300px;justify-content:center;width:30%;align-items:center; /* giving a width of 30% to the sidebar, it will fill 30% of the available space, which is 100% of the window width as defined above */ /* by setting align-items and justify-content to "center" the buttons place themselves in the middle of the sidebar */
}
.sidebar button {
margin:30px 0;max-width:100px; /* giving a bottom and a top margin ofo 30px to the buttons to space them apart */
}
iframe {
width:70%; /* here we simply set the width of the iframe to the remaining space which is 70% of the 100% width of the .flexbox container */
}
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
Youtube iframe needs to be scaled depending on the div container width. The width varies depending on the page snippet layout.
The Youtube video aspect ratio is 560/315, width/height.
In what I tried (see below), the Youtube iframe height is too short and crops the thumbnail.
ACTUALLY, it's the thumbnail that is cropped. If you play the video, the apsect ratio adjusts…
BUT the video is too narrow (tiny) because it shows with the height of the iframe container which is way too short.
This happens on Firefox and Chrome latest browsers.
How can I get the display to adjust the video to the correct aspect ratio within the container div?
See https://codepen.io/iamalta/pen/MMwwwK
Video here: https://www.youtube.com/watch?v=UDV161pAcUU
HTML CODE:
<div class="col-12">
<div class="left col-6">
<iframe class="left youtube" src="https://www.youtube.com/embed/UDV161pAcUU" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div class="left col-6">
<div class="p1">
This Tropical Water Lily Preview Video shows Tricker's and the wonderful world of Tropical Water
Lilies. Some scenes are from our DVD Introduction to Water Gardening. Purchase entire DVD.
</div>
<div class="clearfix"></div>
<div class="col-12 p0">
<img src="https://www.tricker.com/media/ecom/description/redtropicalheading1.jpg" class="img-100-auto" />
</div>
</div>
</div>
CSS
.youtube{
width: 560px;
height: 315px;
max-width: 100%;
height: 56.25%;
}
.img-100-auto{width:100%;height:auto}
.clearfix:after, .clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
.col-6{width:50%}
.col-12{width:100}
.left{float:left}
.p1{padding:rem}
.center{text-align:center}
Thank you in advance for your suggestions and hopefully an answer that works!
I noticed there was a type on the css for .youtube.
It had two heights.
If I remove that, the height will be too tall.
This also doesn't work:
.youtube{width: 1120px;height:56.25%;max-width:100%;}
I found it! Thanks for your help. I worked all day on this and appreciate your suggestion.
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
What if instead of percentages you used vw and a calculate the height to be the width divided by the aspect ratio. You may have to tweak the width to make it fit a little better because of the padding of each div.
So this:
.youtube{
width: 50vw;
height: calc(50vw/1.77);
}
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 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?