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>
Related
If anyone could help me with this. I've been struggling for a few days. I'm trying to open a video using the bootstrap modal. I am showing the video on the home page. When I start the application or when I do a reload it works properly, but if I change the component to the About page or something else, when I go back to the modal it opens a dialog, but only with a white background and the video does not start.
<div class="container-xxl py-5 px-0 wow fadeInUp" data-wow-delay="0.1s">
<div class="row g-0">
<div class="col-md-12">
<div class="video">
<button type="button" class="btn-play" data-bs-toggle="modal" data-src="assets/video.mp4" data-bs-target="#videoModal">
<span></span>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content rounded-0">
<div class="modal-body">
<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="" id="video" allowfullscreen allowscriptaccess="always"
allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
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 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 am using the following code to put videos on a website, however only the left half of the video is visible on the phone screen when vertical
I am not a web developer. Can someone show me exactly what is missing and how can I make it fit the phone screen correctly?
Is it in the youtube iframe link or in bootstrap?
<section class="dark-grey-text text-center">
<!-- Section heading -->
<h3 class="font-weight-bold mb-4 pb-2">Test</h3>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5">Custom</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-100 col-md-12 mb-4">
<!-- Card -->
<div class="card card-cascade wider card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<iframe width="640" height="480" src="https://www.youtube.com/embed/*******?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Card image -->
<!-- Card content -->
<div class="card-body card-body-cascade text-center pb-0">
<!-- Title -->
<h5 class="card-title">
<strong>
Software
</strong>
</h5>
<!-- Description -->
<p class="card-text">Inquire </p>
<!-- Card footer -->
<div class="card-footer mt-4">
<p class="float-left font-weight-bold mb-1 pb-2">10</p>
<a class="float-right material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fas fa-heart grey-text ml-3"></i>
</a>
<a class="float-right material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fas fa-eye grey-text ml-3"></i>
</a>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
I tried putting this into style.css but I didnt notice any difference
.iframeVideo {
height: 0px;
padding-top: 25px;
padding-bottom: 56.2%;
position: relative;
}
.iframeVideo iframe {
width: 1%;
height: 100%;
position: absolute;
}
if you are using bootstrap then please refer this for responsive video embeds.
https://getbootstrap.com/docs/4.5/utilities/embed/
Fixed by adding to iframe:
<div class="card card-cascade wider card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" width="640" height="480" ...
Id like to hide image in iframe. I am trying this :
iframe A IMG {
display:none;}
But it doesnt help, my HTML :
<div class="container-fluid blog-main">
<div class="blog-post">
<h2 class="blog-post-title">
<span><a href="http://martinpodlesak.com/stanislav-dietz/" rel="bookmark" title="Permanent Link to Stanislav Dietz">
Stanislav Dietz</a></span>
</h2>
<div class="meta-tag">
<div class="cleared"></div>
<i class="fa fa-pencil-square-o"></i> <a class="post-edit-link" href="http://martinpodlesak.com/wp-admin/post.php?post=435&action=edit">Edit</a>
<div>
<p><iframe src="http://www.eliteprospects.com/iframe_player_stats.php?player=72289" width="100%" height="490" scrolling="yes" frameborder="0"></iframe></p>
</div>
</div>
</div>
<div class="cleared"></div>
</div>
And my website where I am trying to solve the problem:
http://martinpodlesak.com/stanislav-dietz/