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>
Related
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">
here is my html code, what i want do when cursor on iframe when i click it plays video and when i scroll parent page scroll
<section class="section section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<h2>How We Work</h2>
</div>
</div>
<div class="col-lg-6">
<div class="">
<iframe width=560 height=315 src="https://www.youtube.com/embed/wYHA_qStcqE?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
<div class="col-lg-5">
<div class="content">
<iframe width=560 height=315 src="https://www.youtube.com/embed/sy41imOrHbg?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
You can add this attribute "scrolling".
<section class="section section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<h2>How We Work</h2>
</div>
</div>
<div class="col-lg-6">
<div class="">
<iframe scrolling="yes" width=560 height=315 src="https://www.youtube.com/embed/wYHA_qStcqE?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
<div class="col-lg-5">
<div class="content">
<iframe scrolling="yes" width=560 height=315 src="https://www.youtube.com/embed/sy41imOrHbg?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
I am currently trying to use Bootstrap to get two columns: One width 1/3 size and one with 2/3 size.
What I have is a container, and in it a row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="image.png" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
So the expected result for me (in my understanding) would be 1/3 of the page with the text and linebreaks and 2/3 (on the right side) would be the image with the image-map on it.
But: the result is both underneath, so in one line there is this thex text (within col-md-4) and on the next line there is the image (within col-md-8). Where is the problem?
Info: My viewport is big enough and even changing is to xs doesn't change the result.
As written in your comments, this DOES work:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://upload.wikimedia.org/wikipedia/commons/3/33/Su%C3%ADno_alta.jpg" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" style="max-width: 100%; height: auto !important" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
For small screen use col-sm-4 and col-xs-4 because col-md-4 taking 992px and up screen. One important thing for image, give img-reponsive class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://dummyimage.com/600x200/000/fff&text=sample+image" alt="" usemap="#image-maps-2017-08-25-161100" border="0" class="map img-responsive" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</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>
I can't seem to get this site to format correctly (be "responsive" to mobile) when viewing with mobile devices.
I am using Bootstrap, but when I view from a mobile device, it just looks like a normal desktop is viewing it. Other sites I have done, it "zooms" in on the text and such to look nice on mobile.
I'm sorry if I'm missing something small here, but any help would be greatly appreciated!
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE HERE</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div role="main">
<header>
<div class="container">
<div class="row address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="row center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
</div>
<br/>
<div class="row center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer>
</div>
</body>
</html>
It seems that you are only using span12 in all the rows, which means that they will never get segmented when the viewport changes. A large part of having a responsive grid layout is breaking the elements of a row into segments so that the row's layout can be adjusted if the viewport falls below certain thresholds.
If the primary <div> in every row is span12 all the content in the row will remain essentially width=100% and the content will only scale down as the viewport decreases.
I would suggest avoid using span12 for every primary <div> and spend some time reconsidering the granularity of the content. See the Twitter Bootstrap documentation on Scaffolding for reference.
Use this layout, i think it will solve your issue. I removed the row class.
TITLE HERE
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script> </head> <body> <div role="main">
<header>
<div class="container">
<div class="address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
<br/>
<div class="container">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
<br/>
<div class="center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer> </div> </body> </html>