I have read many post and tried everything to make the iframe responsive and keeping the 16-9 ratio... it is not bad but the video is still cropped in the youtube frame.
What is the trick with bootstrap 5?
<div class="embed-responsive embed-responsive-16by9" style="width:800px; height:450px">
<iframe class="embed-responsive" title="YouTube video player" src="{{ $image['image']['url'] }}" frameborder="0" allowfullscreen="" width="100%" height="100%"></iframe>
</div>
Was having the same problem, documentation on the bootstrap site says this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>
But this doesn't work, height was being ignored.
I found a solution on MD Bootstrap docs:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" allowfullscreen></iframe>
</div>
MD Bootstrap: Embeds
Works perfect for me on BS5 if you add height & width
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
</div>
This information can also be found in the bootstrap 5 documentation:
https://getbootstrap.com/docs/5.0/helpers/ratio/
https://getbootstrap.com/docs/5.0/migration/
This soluction was the only worked at all in bootstrap 5:
<div class="col-12 col-md-8 offset-md-2 col-lg-8 offset-lg-2">
<div class="ratio ratio-16x9 text-center mt-4 mb-4 ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/DTpvdyzxQWE?controls=0" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
</div>
</div>
This version should work.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>
Don't ask me why but during some testing adding older bootstrap css did the trick for me while using the bootstrap format as posted by Jnic:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
Related
<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
I'm using bootstrap 5. When I use "ratio" the iframe aligns to the right. How can I use "ratio" and still align this ifram in the center?
Probably going to be yelled at for suggesting this because HTML5 has deprecated it, but the <center> tag works well for this scenario.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<center>
<iframe align="center" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</center>
Another way is to use style="display: flex; justify-content: center;" for the outer div element
<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto" style="display: flex; justify-content: center;">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" ></iframe>
</div>
You need to move your flex related classes to a div above, so that the div that is controlled by the ratio width & heights can be centered:
<div class="flex justify-center items-center w-full">
<div class="ratio ratio-4x3 mx-auto">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</div>
PS. I used Tailwind classes, just convert them to bootstrap 5 classes - I'm not sure what those are - probably just more verbatim: justify-content-center align-items-center
As title says, I've embeded a youtube video on my page, upon resizing the page, while the rest of the content is reponsive and adapts, the youtube frame doesn't, overflows and blocks other content from the site.
I want to make it responsive if possible, but mainly I just want to make it so nothing can block the content and add some kind of divider.
Really new at bootstrap/html/css so I apologise if this is a really easy to fix problem and I'm just dumb, any and all help apreciated, thanks.
Video of the issue: https://puu.sh/CsDP4/c5f221c22e.mp4
Code:
<div class="bg container-fluid text-center" id="GFX">
<div class="text-center title">
<h1>GFX</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe src="https://albumizr.com/a/TO-n" scrolling="yes" frameborder="0" allowfullscreen width="700" height="700"></iframe>
</div>
<hr/>
</div>
<hr>
<div class="bg embed-responsive-16by9 text-center" id="Video">
<div class="text-center title">
<h1>Video Editing</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center embed-responsive-item " width="1280" height="720" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLwf6BHzjcncmOoDkyKM8PNAnYhRHkbXub" frameborder="0" autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<hr/>
</div>
<hr/>
<br>
<div class="bg container-fluid text-center" id="Music">
<div class="text-center title">
<h1>Music Production</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center" width="100%" height="auto" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/677510388%3Fsecret_token%3Ds-q8lC3&color=%230d58e7&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<hr/>
</div>
<hr/>
Iframe element's inner content does not resize when you resize your main page window, that's just how iframe works. To resize iframe content dynamically, you can check solution that was already given here: How to set iframe size dynamically (it involves some use of javascript).
you can use max-width in iframe so it be responsive.
iframe {
max-width: 100%
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="bg container-fluid text-center" id="GFX">
<div class="text-center title">
<h1>GFX</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe src="https://albumizr.com/a/TO-n" scrolling="yes" frameborder="0" allowfullscreen width="700" height="700"></iframe>
</div>
<hr/>
</div>
<hr>
<div class="bg embed-responsive-16by9 text-center" id="Video">
<div class="text-center title">
<h1>Video Editing</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center embed-responsive-item " width="1280" height="720" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLwf6BHzjcncmOoDkyKM8PNAnYhRHkbXub" frameborder="0" autoplay; encrypted-media; gyroscope; picture-in-picture allowfullscreen></iframe>
</div>
<hr/>
</div>
<hr/>
<br>
<div class="bg container-fluid text-center" id="Music">
<div class="text-center title">
<h1>Music Production</h1>
</div>
<hr/>
<div class="container-fluid overflow-hidden">
<iframe class="text-center" width="100%" height="auto" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/677510388%3Fsecret_token%3Ds-q8lC3&color=%230d58e7&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<hr/>
</div>
<hr/>
</body>
<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
Try this structure:
<div class="container-fluid overflow-hidden">
<div class="row">
<iframe class="text-center embed-responsive-item "></iframe>
</row>
</div>
I have the below code for responsive YouTube video but it does not display at all. When I remove the classes, the video displays but its width is very short. Here is the site that hosts it.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="<?php echo get_field( "youtube_video" );?>" frameborder="0" allowfullscreen></iframe>
<div class="more-videos">
<button type="button" class="btn btn-warning">View More Videos From Matt</button>
</div>
</div>
HTML as displayed on the site,
<div class="row">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/v/lQ2EZdkLCfc&version=3&loop=1&playlist=gq_zxxutiok,GEuouxgqa3Q,iwiXhnjlRuw" frameborder="0" allowfullscreen></iframe>
<div class="more-videos">
<button type="button" class="btn btn-warning">View More Videos From Matt</button>
</div>
</div>
</div>
The Youtube URL is wrong. Replaced v with embed in the URL and replaced your first & with a ? to denote the start of query strings.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/lQ2EZdkLCfc?version=3&loop=1&playlist=gq_zxxutiok,GEuouxgqa3Q,iwiXhnjlRuw" frameborder="0" allowfullscreen></iframe>
<div class="more-videos">
<button type="button" class="btn btn-warning">View More Videos From Matt</button>
</div>
</div>
</div>
Here is my webpage.
http://ownscene.com/index-en.html
The problem is with the embed video in 2nd section.
Here is the code
<!-- present -->
<section class="no-padding bg-primary">
<div>
<div class="row">
<div style="color: #fff;" class="col-lg-2"></div>
<div class="col-lg-8 col-md-12 wow fadeIn" >
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>
</div>
</div>
<div style="color: #fff;" class="col-lg-2"></div>
</div>
</section>
<!-- present -->
I tried removing both left and right div and weird blank space is gone.
I don't know what to do, I want it to be centered and smaller on lg then take full space in md
Please help
Thank you,
Try using col-lg-offset
<div class="container-fluid">
<div class="col-lg-8 col-md-12 col-lg-offset-2 col-md-offset-0 wow fadeIn" >
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>
</div>
</div>
</div>
Remove the border using CSS since iframe has default border
<iframe style="border: 0 none" class="embed-responsive-item" src="//www.youtube.com/embed/HLKPZ-vFYqI"></iframe>
Hi I am trying to center the iframe for a Youtube video in Twitter Boostrap 3, currently it is left aligned.
I have used the following html:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0"
align="center" id="videothumbnail"></iframe>
</div>
CSS:
#videothumbnail{
height: 50%;
width: 50%;
float: center;}
Use classes col-xs-12 text-center. You don't need float:center;
So change this:
<div class="embed-responsive embed-responsive-16by9">
to
<div class="embed-responsive embed-responsive-16by9 col-xs-12 text-center">
I was able to center my embed-responsive by bordering it with smaller grids like so:
<div class='row'>
<div class='col-sm-2'></div>
<div class='col-sm-8'>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen></iframe>
</div>
</div>
<div class='col-sm-2'></div>
</div>
Just add center tags
<center>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" id="videothumbnail" src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" align="center"></iframe>
</div>
</center>
If working with Bootstrap 4 you could use offset.
<div class="col-sm-8 offset-md-2 embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="750" height="415" src="https://www.youtube.com/embed/{your-video}" frameborder="0" gesture="media" allowfullscreen>
</iframe>
</div>
This limites the embed to 8 columns and keeps 2 columns either side of it blank (totalling 12).
wrap the iframe with h(1-2-3...)
<h4 class="text-center"> <iframe ....> </iframe> </h4>
<div class='row text-center'>
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen>
</iframe>
</div>
</div>