Trying to embed video + chatroom. If I use 100% width, the chatroom displays at only ~1/4 size. I want chatroom to match exact height of the 16x9 player.
I tried to use matchHeight js but was unable to get that to work, even with no errors in console.
Thank you for looking.
<body>
<?php include_once("../../files/bootstrap-header.php"); ?>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center"></div>
<div class="col-xs-12 col-sm-9">
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen class="embed-responsive-item" frameborder="0" height="100%" scrolling="no" src="http://player.twitch.tv/?channel=agentcodydanks69" width="100%"></iframe>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="hidden-md">
<iframe width="100%" height="100%" src="https://www.twitch.tv/embed/runitup/chat" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
Have you inspected each element to see if there's padding around one of them? May have to set the height for the row to be the height of the smaller element.
The best way would be to use css flexbox
.equal--height {
display: flex;
}
.iframe {
background: red;
}
<div class="equal--height">
<div class="iframe">
<p>We've the same height</p>
</div>
<div class="iframe">
<p>We've the same height</p>
<p>Even if i have more text</p>
</div>
</div>
Related
I have a bootstrap 4 layout with 3 columns, the middle column has two nested columns. One is an embeded youtube video with responsive size and the other is a list of text with a scroll bar. I want to set the height of the scrollable column (the red background) to exactly the height of the embeded responsive video and make it resizable and responsive, in case the device width is insuficient it should be collapsed bellow the video. The code is here https://jsfiddle.net/h7f8r1ut/
Please suggest if this can be achieved without javascript code.
I've looked at similar questions but was unable to find a suitable solution for my exact requirements.
.scroll {
text-align: left;
height: 40vh;
overflow: hidden;
overflow-y: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 bg-dark text-info">
left sidebar
</div>
<div class="col-md-8 bg-secondary">
<div class="container-fluid">
<div class="row">
<div class="col-md-10" id="video">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-2 scroll bg-danger">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 bg-dark text-info">
right sidebar
</div>
</div>
</div>
</div>
You need to put the scrollable content inside a position:absolute parent, and then set overflow:auto on the column. There are utility classes for this included in Bootstrap 4.3 and newer.
<div class="container-fluid">
<div class="row">
<div class="col-md-10" id="video">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
</div>
</div>
<div class="col-md-2 overflow-auto bg-danger">
<div class="position-absolute">
<p>1</p>
<p>2</p>
....
</div>
</div>
</div>
</div>
https://www.codeply.com/go/W0onIeqkRy
EDIT:
If you only want the scroll behavior on larger screen widths (md and up), you could use a media query:
#media (min-width: 768px) {
.position-md-absolute {
position: absolute;
}
}
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content"></div>
</div>
</div>
</div>
I do not have a definite css yet, I still think how I can do this
How can I make the image full width inside a container, just like in the example using bootstrap, The black border is the bootstrap container
What I try to do is the content in a container and the image outside of that container,
Just set these properties--
.imagen img{
width: 100%;
max-width: 100%;
}
Here you go with jsfiddle https://jsfiddle.net/9drawa3h/1/.
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content">
<img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2013/04/13/how-to-do-free-online-background-check/_jcr_content/par/featured-media/media-1.img.jpg/876/493/1422493303787.jpg?ve=1&tl=1" />
</div>
</div>
</div>
</div>
I know you are looking for text-content in the second column, but I specified something else.
As I not sure whether you are going to use img tag ro background-image in the 1st column, so I have provided both.
1st Column with background-image and 2nd column with img tag.
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 am trying to make a single page full screen layout using Bootstrap 3 where the height of the main body is responsive.
The page is going to be displayed in Kiosk mode displaying 3 panels which display different messages, but as the site is going to be displayed on multiple screens of different sizes I am wanting to get the main to be responsive in height.
https://jsfiddle.net/gokcLvtv/7/
<div class="container">
<div class="row header">
<div class="col-xs-6">
Title
</div>
<div class="col-xs-6 text-right">
LOGO
</div>
</div><!-- Header-->
<div class="row main">
<div class="col-xs-8">
<div class="well">Panel One</div>
</div>
<div class="col-xs-4">
<div class="well">Panel Two</div>
<div class="well">Panel Three</div>
</div>
</div><!--main-->
<div class="row footer">
<div class="col-xs-12">© Copyright 2016</div>
</div><!--footer-->
</div><!--container-->
As you can see I have had to specify a height of the main content to get the cols to be 100% and then the .wells inside the column. But I am wanting this to be 100%.
You can use the vw value for horizontal and vertical resizing.
For example
HTML
<div class="main">
<div class="well">
Panel one
</div>
</div>
CSS
.main {
border: 1px solid red;
height: 75vw;
}
.well {
width: 30vw;
height: 30vw;
margin: 1vw;
}
It's easy to translate from px to vw. Every 1 vw is 10 pixels.
Thanks for your help with the vw ... I have managed to achieve this using vh for the height..
I have created an example for anyone who would like to use this in the future - here
Using the same layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">Header</div>
</div>
</div>
<!-- main -->
<div class="row">
<div class="col-xs-8 main">
<div class="well">
Main Panel
</div>
</div>
<div class="col-xs-4 side-bar">
<div class="well">
Side Panel One
</div>
<div class="well">
Side Panel One
</div>
</div>
</div>
<!-- Footer-->
<div class="row">
<div class="col-sm-12">
<div class="well">Hello</div>
</div>
</div>
</div>
You will just have to play around with the heights to get it to the screensize that works for you.
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>