bootstrap iframe not resizing - html

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

Related

Iframe aspect ratio 16:9 with fixed height

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>

Fixing the video container size so the video doesn't stretch beyond it

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.

How can I put my YouTube videos on the same line?

I would like to put both my YouTube videos on the same line. I tried adjusting the iframe and creating a wrapper, but it doesn't seem like I'm targeting the right things. I'm not sure where I went wrong. Here's my JFiddle: https://jsfiddle.net/6a73m27n/
.content {
margin-top: 15px;
}
iframe {
float: left;
}
<div class="video_wrapper">
<iframe width="400" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="400" height="300" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
</div>
Just mention the width of the video in percentage as shown below:
<div class="video_wrapper">
<iframe width="40%" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="40%" height="200" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
It actually works if you have enough width for both of them on one line.
Despite that, I would recommend you to put this styling to the iframe instead:
iframe {
display: inline-block;
vertical-align: top; /* or middle, bottom, baseline by your preference */
}

Embed video in an image in responsive html5

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 */
}

Hide a image behind a border in html, css

I wish to hide a video behind a border and appreciate any help I can get. This is what I have now with the image above the border.
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;">
<iframe width="550" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
try this give iframe width 100% and wrap it inside div like this
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;">
<iframe width="100%" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
add to div style:
style="position:relative;overflow:hidden;width:550px;height:315;"
I don't think what you try to do is allowed by youtube.
but you can just say this on the iframe:
style="visibility=hidden;"
Although it violates the Youtube Terms of Service, just to answer how to do it for the sake of knowledge
This will be your HTML
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;" class="yt-vid">
<iframe width="550" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
in your CSS
.yt-vid > iframe {
position: relative;
z-index: -1;
}
I do not encourage you to do this. You should not do this actually.
You can use style="visibility: hidden;" css tag in iframe. Or just give 0 (zero) width to iframe.