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" ...
Related
I have a website where some pages have a lot of elements (scrolling exists), while other pages have only few elements (scroll doesn't exist). What I'm trying to do, is to create my footer to be always at the bottom of the page no matter how big or small that page is.
The bootstrap footer I'm using is the following:
<footer class="text-center text-white bg-dark text-center">
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold">Sun Dance Services</h6>
<hr
class="mb-4 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #7c4dff; height: 2px"
/>
<p>
Here you can use rows and columns to organize your footer
content. Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold">Countries</h6>
<hr
class="mb-4 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #7c4dff; height: 2px"
/>
<p><i class="fas fa-home mr-3"></i>United Kingdom</p>
<p><i class="fas fa-envelope mr-3"></i>Cyprus</p>
<p><i class="fas fa-phone mr-3"></i>Ireland</p>
<p><i class="fas fa-print mr-3"></i>United States</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold">Useful links</h6>
<hr
class="mb-4 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #7c4dff; height: 2px"
/>
<p>
<%= link_to 'Home Page', root_path, class:"text-white" %>
</p>
<p>
<%= link_to 'About Us', home_about_path, class:"text-white" %>
</p>
<p>
<%= link_to 'Products & Services', home_products_path, class:"text-white" %>
</p>
</div>
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold">Contact</h6>
<hr
class="mb-4 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #7c4dff; height: 2px"
/>
<p><i class="fas fa-home mr-3"></i> New York, NY 10012, US</p>
<p><i class="fas fa-envelope mr-3"></i> info#example.com</p>
<p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div
class="text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2)"
>
© 2021 Copyright:
<a class="text-white" href="https://mdbootstrap.com/"
>Sun Dance Services</a
>
</div>
</footer>
I tried <footer class="text-center text-white bg-dark text-center fixed-bottom"> which solves this issue only for small content pages. It will set the footer at the lowest position (scrolling does NOT exists here). SEE SCREEN SHOT 1!
However, when the page is large there are two issues:
Footer appears always at the bottom of page (when the scroll position is at the top of the page the footer appears).
Footer hides elements that are at the end (please see SCREEN SHOT 2 below).
What I want to do:
Have the footer at the end of the page whether the content is small or large.
Hide the footer when scrolling is not at the bottom of the page.
I don't want the footer to be fixed.
I would prefer if I use plain bootsrap instead of CSS.
You can set min height to the body tag so you will force the footer to be at the bottom whatever the body’s height
I am using bootstrap and angular material for the UI. In one of my div. I want to move my button to the right side but when I do apply class "float-right" it is going behind the other div.
This is the image URL https://prnt.sc/y0xn90
Below is the code.
<div class="card-body">
<div class="tab-content">
<!-- /.tab-pane -->
<div class="active tab-pane" id="timeline">
<div>
<button mat-raised-button color="primary">Add Treatment</button>
</div>
<div>
<ul class="timeline" *ngFor="let treatment of patientTreatments">
<li class="timeline-item bg-white rounded ml-3 p-4 shadow">
<div class="timeline-arrow"></div>
<h2 class="h5 mb-0">{{treatment.title}}<span class="float-right" style="cursor: pointer;">
<mat-icon>edit</mat-icon>
</span></h2>
<span class="small text-gray"><i class="fa fa-clock-o mr-1"></i>{{treatment.treatmentDate}}</span>
<p class="text-small mt-2 font-weight-light">{{treatment.summary}}</p>
<div *ngFor="let files of treatment.treatmentFiles">
<img src="" alt="Treatment image">
</div>
</li>
</ul><!-- End -->
</div>
<!-- The timeline -->
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="settings">
111
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div><!-- /.card-body -->
you can use the display flex property with the width 100% and u can push left or right side with flex-end/flex-start
<div style="width: 100%;display: flex;justify-content: flex-end;align-items: center;">
<button mat-raised-button color="primary">Add Treatment</button>
</div>
I'm using materialize cards for my webpage, the idea is to use the cards as menus so when a person click in any part of the card the link should open. But it is only working by clicking in the image and/or in the text but no in any other part of the card.
This is the code:
<div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>
The code above I know is going to work only with the image and the text. But I tried to make all the card as a link like
<a href=""> <div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>
But it didn't work.
try making an href tag absolute on every card try this :
div.col{position:relative}
.fullcard{position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:inline-block;
z-index: 99999;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="col l6 m12 s12">
<a href="signup.html" target="_blank">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://pixdaus.com/files/items/pics/6/20/107620_cb8da068c718b9e6aa7aa0bcbc68d18f_large.jpg">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4">RoboTico<i class="material-icons right">build</i></span>
</div>
</div>
</a>
</div>
If you set the a to be style display:block and then wrap everything in it - you should be able to click anywhere in the card and navigate to the new link. The reason why you currently have to click on the elements is that a's are inline level elements and only respond to direct interaction on them - you need to set it to become a block level element and to therefore respond to any interaction within that block.
I added a couple of style rules to highlight this (such as border and padding) and doing it this way means that you only need to have a single a in each card. Note that I don't have your image - so the alt text shows up here.
.display-card {
border: solid 1px #333;
}
.nav-link {
display:block;
padding:15px
}
<div class="col l6 m12 s12 display-card">
<a href="signup.html" target="_blank" class="nav-link">
<div class="card cardHover">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="img/test2.jpg" alt="image">
</div>
<div class="card-content">
<span class="card-title activator text-darken-4"> RoboTico <i class="material-icons right">build</i></span>
</div>
</div>
I'm coding a page that uses nested bootstrap columns. I am using push/pull to have the columns switch places on mobile, and it's working great. However, on desktop I've got some odd spacing issues. The nested columns are offset to the right of the parent column.
I've set up a fiddle that shows this behavior. In this example, col-md-9 is the parent div. I've given it a gold background to show the behavior. When you resize the output, the nested divs flow into place as expected. Any insight to this issue would be greatly appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-8" id="lgXbtvA">
<script src="http://cdnapi.kaltura.com/p/1982211/sp/198221100/embedIframeJs/uiconf_id/40685101/partner_id/1982211"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="kaltura_player_1507831819" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text</p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-4 e" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="" />
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="" />
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Edit: The columns appear in the proper order on the desktop view, they are just offset for reasons I can't explain.
When you used pull and push class in bootstrap used alternate column for that So that you need to used:
col-xs-8 col-md-8 col-md-push-4 instead of col-xs-12 col-md-8 col-md-push-8
and
col-xs-4 col-md-4 col-md-pull-8 instead of col-xs-12 col-md-4 col-md-pull-4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-8 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-4 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Update Demo Link
Your large video should be
class="col-xs-12 col-md-8 col-md-push-4"
and your small video should be
class="col-xs-12 col-md-4 col-md-pull-8"
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
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>