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);
}
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
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>
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 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?