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">
Related
I would like to have a small thumbnail of a video, uploaded by user in a HTML webpage. When user clicks on it, it shows the video in the same webpage.
I tried this code:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/video/hanson.mp4"></iframe>
</div>
But it is not what I need.
Please note that the videos are not on youtube or so on. And there are numerous video files so the function should be able to create thumbnail from the address of the file on the server.
Is there any way to get thumbnail as I described?
Thanks.
For example this will work with thumbnails in Bootstrap.
Update: Set image src to https
function play(item){
var videoFiles = 'https://www.youtube.com/embed/';
var videoParam = 'autoplay=1&rel=0&showinfo=0&autohide=1';
document.getElementById('player').src = videoFiles + item + '?' + videoParam;
}
<!-- bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-wrap mx-auto" style="width:100%; max-width:400px;">
<div class="col-12 mb-4 player">
<div class="embed-responsive embed-responsive-16by9">
<!-- first item of playlist -->
<iframe id="player" class="embed-responsive-item" frameborder="0" width="560" height="315"
src="https://www.youtube.com/embed/1G4isv_Fylg?version=3&autoplay=0&rel=0&showinfo=0&autohide=1"
allow="autoplay; clipboard-write; encrypted-media" allowfullscreen></iframe>
</div>
</div><!--/.player-->
<div class="col-12 text-center playlist">
<div class="row">
<a class="col-3 mb-3" onClick="play('1G4isv_Fylg')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/1G4isv_Fylg/0.jpg" alt="" />
<div class="card-body py-2"><small>Paradise</small></div>
</a>
<a class="col-3 mb-3" onClick="play('YlUKcNNmywk')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/YlUKcNNmywk/0.jpg" alt="" />
<div class="py-2"><small>Californication</small></div>
</a>
<a class="col-3 mb-3" onClick="play('xik-y0xlpZ0')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/xik-y0xlpZ0/0.jpg" alt="" />
<div class="py-2"><small>A Forest</small></div>
</a>
<a class="col-3 mb-3" onClick="play('1w7OgIMMRc4')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/1w7OgIMMRc4/0.jpg" alt="" />
<div class="py-2"><small>Sweet Child Mine</small></div>
</a>
</div>
</div><!--/.playlist-->
</div>
Just need to add one thumbnail add click event also, I implemented this. look into it,
$(document).ready(function(){
$('#video-id,.demo-play-btn').click(function(){
$('#video-id').get(0).paused ? $('#video-id').get(0).play() : $('#video-id').get(0).pause();
$(".demo-play-btn").toggle();
});
});
.demo-play-btn{
position:absolute;
top:35%;
background:#fff;
left:35%;
cursor:pointer;
}
.demo-play-btn img{
width:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-video">
<video id="video-id" width="470" height="255" poster="https://i.ytimg.com/vi/5Peo-ivmupE/maxresdefault.jpg">
<source src="https://st2.depositphotos.com/4083751/6003/v/600/depositphotos_60037637-stock-video-toddler-with-bottle-and-dummy.mp4" type="video/mp4">
</video>
<div class="demo-play-btn">
<img src="https://lh3.googleusercontent.com/proxy/9Oa4tg5B3DLeqAIsO_qRhmQg_pqtW3RtwBQJYdcv4e44lGfl4UReTpWpe5TDjlyJU3254RakFD48FPfsALnBI2cD6wxt8zMRNtrGEytVkMDHfLxBdiOG7JU-m0csf5RC6AY" class="play-btn" title="Play Video">
</div>
</div>
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;
I have an iframe in Angular2 which adjust its height and width according to the size of an transparent image. Until the the URL specified inside iframe loads I want to display a spinner icon but it hides behind the transparent image. How can I place the icon over that image?
Here is my HTML code:
<div class="wrapper" *ngIf = "showIframe" id="feedsIframe" >
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" class="h_iframe">
<section class="widget" widget>
<div class="widget-body">
<div class="loader animated fadeIn handle" id="spinner007">
<span class="spinner">
<i class="fa fa-spinner fa-spin"></i>
</span>
</div>
</div>
</section>
<img class="ratio" src="assets/img/pictures/transparent2.png">
<iframe class="embed-responsive-item" scrolling="yes" frameborder="0" allowfullscreen [src]="iframeURL" allowfullscreen >
</iframe>
<a (click) = "goBack()" class="button">
<span style="color: #555;" >BACK</span>
</a>
</div>
</div>
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"
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>