I have that code for two columns with iframes:
<div class="container">
<div class="jumbotron" style="background-color:rgba(0,0,0, 0.3);">
<div class="row row-eq-height">
<div class="col-md-9" style="padding-right:20px; border-right: 3px solid #ccc;">
<div class="embed-responsive embed-responsive-16by9" style="border:2px solid #2c3e50;">
<iframe class="embed-responsive-item" src="xxxx"></iframe>
</div>
</div>
<div class="col-md-3">
<div class="embed-responsive embed-responsive-16by9" style="border:2px solid #2c3e50;">
<iframe class="embed-responsive-item" src="xxxxxx"></iframe>
</div>
</div>
</div>
</div>
</div>
Problem is that right iframe is very tiny, I want to have the same height as first iframe on second.
How can I set height of second iframe to be the same as height of first iframe?
Why don't you set the height of the right iframe? For example, style="height:200px"
Related
I'm trying to embed Grafana panels into my website and have a problem with styling
How to make my iframes to fit inside the col-sm and not with a big margins (see attached screenshot)
My html is:
<p class="fs-1 fw-bold" id="internalSensors_1">
Internal Beehive Sensors
</p>
</div>
<div class="row">
<!-- Internal temperature from Grafana-->
<div class="col-sm">
<div class="col-sm embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https:***" allowfullscreen frameborder="0"></iframe>
</div>
</div>
<!-- Internal humidity from Grafana-->
<div class="col-sm">
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https:***" allowfullscreen frameborder="0"></iframe>
</div>
</div>
<!-- Internal pressure from Grafana-->
<div class="col-sm">
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https:***" allowfullscreen frameborder="0"></iframe>
</div>
</div>
</div>
Try to do the following :
give a .w-100 to the <iframe></iframe>
give a .p-0 to <div class="col-sm">
I have a problem with my friend's website which I can't solve. If you could help I'd be very pleased..
And the problem is:
My bootstrap div doesn't hold a height and is going under following div, especially in tablet/phone responsive version. Maybe it will be easier if I give you the address:
http://trido.io/index3.html
and the code I'm talking about is:
<section id="download" class="download bg-primary text-center">
<div class="container">
<div class='col-md-1'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
<div class='col-md-4'>
<div class="row">
<div class='col-md-1'>
</div>
<div class='col-md-9'>
<p align="center">TriDo - Do a chain of three!</p><br>
<p>Arrange your balls in order from 1 to 3:
horizontally, vertically or diagonally. Prevent opponent's arrangement of balls.</p><br><br>
</div>
</div>
<div class="row">
<ul>
<li>Multiplayer<li>
<li>Endless single-player mode<li>
<li>Game Center leaderboards<li>
<li>Game Center Achievements<li>
</ul>
</div>
</div>
<div class='col-md-1'>
</div>
<div class="col-md-5">
<div class="device-container">
<div class="device-mockup iphone6 portrait black">
<div class="device">
<div class="screen">
<!-- <video width="300" height="534" controls> -->
<video width="270" height="480" controls>
<source src="TrailerDoTel.mp4" type="video/mp4">
<source src="TrailerDoTel.ogg" type="video/ogg">
</video>
<div class="button">
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-0.5'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
</div>
</section>
This is because your <div class="device-mockup iphone6 portrait black"> is set to position absolute which takes the element out of the flow of the document, so its content will not affect other elements in the DOM.
If you set it to position: relative; it will no longer overlap the div below it.
Or you can give your .device-container a static height, like height: 676px;
How do I grow an iframe to match it's height when using bootstrap grids? from what I know, iframes have a fixed height, but when I use a grid to adjust the columns it doesn't resize. So using other solutions that set the height on load does not work.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div>
<DIV>
<DIV>
<IFRAME XXXstyle="min-height: 100%; width:100%" xstyle="BORDER-TOP: 0px; HEIGHT: 100%; BORDER-RIGHT: 0px; WIDTH: 100%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px"
frameBorder=0
scrolling=no src="footer.html">
</IFRAME>
</DIV>
</DIV>
</div>
</div>
</div>
</div>
For footer.html I have:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-md-offset-1">
</div>
<div class="col-md-2 ">
</div>
<div class="col-md-2 ">
</div>
<div class="col-md-2 ">
</div>
<div class="col-md-2 ">
</div>
</div>
</div>
Thanks.
I got it working like this, plus calling it in the body onload event.
I've no idea how to jqueryfy the body onload event with this though...
$( window ).resize(function() {
resizeFrame(document.getElementById('footerIFRAME'))
});
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}
I can't seem to get my pills to work on a small screen. They can tab content fine on a normal screen, but once I make the screen small, the pills are unclickable.
I don't know what the problem is.
Also if I have only the pills, then it tabs but once it's in the container, then it doesn't tab.
<div class="container-fluid">
<div class="row" style="margin-top: 1em; border: 2px dashed lightgreen">
<div class="col-md-8">
<div class="row">
<div class="col-md-3" style="text-align: center; border: 2px dotted purple"><img src="/images/video-thumbnails/ice.jpg" class="songThumbnail">
</div>
<div class="col-md-5" style="border: 2px dotted purple">
TEXT TEXT TEXT</div>
<div class="col-md-4 col-xs-12">
TEXT TEXT TEXT
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin: 1em;">
<img src="/images/icons/piapro.png" class="favicon"> ice - オケ <span class="whisper">(karaoke)</span>
</div></div>
</div><div class="col-md-4" style="border: 1px solid red; float: right;">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#niconico">Niconico</a></li>
<li><a data-toggle="pill" href="#youtube">YouTube</a></li>
<li><a data-toggle="pill" href="#soundcloud">SoundCloud</a></li>
</ul>
<div class="tab-content" style="text-align:center;">
<div id="niconico" class="tab-pane fade in active">
<p><div class="embed-responsive embed-responsive-16by9" ><script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm28116292"></script><noscript>【ニコニコ動画】【Faeri】ice【歌ってみた】</noscript>
</div></p>
</div>
<div id="youtube" class="tab-pane fade">
<br>
<strong>日本語 | Japanese</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/JOd9cunyWAg"></iframe>
</div>
<br>
<strong>英語 | English</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mCkHvttcSoE"></iframe>
</div>
</div>
<div id="soundcloud" class="tab-pane fade">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="600" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/244661025&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<br>
<p>TEXT TEXT TEXT</p>
</div></div>
After re-implementing the page again and fiddling around with the columns/rows, I realized that it was a case of z-index. Oops. It wasn't obvious until I changed the bg color of the divs.
The final code I ended up with for the media sidebar was this:
<div class="col-md-4 col-lg-4 pull-right" style="background-color: #99CCFF; border: 3px dotted red; display: block; z-index: 1; margin-top: 1em;">
<!-- All that jazz and other stuff -->
</div>
And it seems to work like I wanted to. Hopefully it won't hiccup on me in the future. #NathanielFlick, apologies for not being more helpful in providing the code, but I really appreciate you taking the time to respond back to me. Thanks!
Question says it all,how is it possible to embed a vimeo video in bootstrap 3.0 ?
Example Code:
<div class="container">
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="//player.vimeo.com/video/71876963" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
</div>
Is unfortunately not working.
Please try this code, it works in bootply
<div class="container">
<div class="row">
<div class="span6">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">
<iframe allowfullscreen="" src="http://player.vimeo.com/video/71876963" frameborder="0" width="500" height="281"></iframe>
</div>
</div>
</div>
</div>
Here's a simple solution that works for me, tested in Bootstrap 3.0:
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://player.vimeo.com/video/71876963"></iframe>
</div>