Я пытаюсь добавить видео YouTube на мою HTML-страницу, используя iframe.
Он идеально подходит для больших экранов, но когда экран уменьшен до меньшего размера устройства, текст и элементы управления iframe слишком малы, чем требуется.
Я пытался исправить это с помощью CSS, но ничего не работает.
HTML-файл:
<div class="container-fluid">
<!-- header -->
<div class="row">
<div class="col-sm-4 col-md-offset-1 col-md-3" id="header">
<a href="https://www.letsmd.com/">
<img id='main-logo' src="<?php echo e(asset('/web/images/logo-without-Tagline.svg')); ?>">
</a>
</div>
</div>
<!-- banner -->
<div id='banner-container'>
<!-- <div id="transparent-div"></div> -->
<div id='banner-text-div'>
<h1>MEDICAL PAYMENTS CARD</h1>
<h2>Medical EMI cover</h2>
<h2>@ ₹2.74 per day !</h2>
<section>
<p>sadas asdasd asdasdasdasd</p>
<p>dsasd asdasd asdasdas</p>
<p>asdsfetertertert asdasdsad</p>
<p>asdad frgdfgfdgd</p>
</section>
<button class="btn btn-success" id="apply-now-btn">Apply Now</button>
</div>
</div>
<!-- features and benifits -->
<h2 id="features-and-benifits-heading">Features & Benifits</h2>
<div class="features-and-benifits-row row">
<div class="col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8" id="features-and-benifits-div">
<div class="cards-row row">
<div class="cards col-sm-4 col-md-4">
<p>Personal Accident cover of <span>2 LAKHS</span> included</p>
</div>
<div class="cards col-sm-4 col-md-4">
<p>Immediate <span>MEDICAL CASH</span> in less than <span>2 HOURS</span></p>
</div>
<div class="cards col-sm-4 col-md-4">
<p><span>NO INTEREST</span> payments upto <span>18 months</span></p>
</div>
</div>
<div class="cards-row row">
<div class="cards col-sm-4 col-md-4">
<p>Valid for <span>1+3 MEMBERS</span> of family</p>
</div>
<div class="cards col-sm-4 col-md-4" id="card-with-little-text">
<p>Credit limit upto <span>5,00,000</span></p>
</div>
<div class="cards col-sm-4 col-md-4">
<p>Covers <span>MEDICAL INSURANCE</span> deductibles</p>
</div>
</div>
</div>
</div>
<!-- form -->
<div class="row" id="form-row">
<div class='col-md-12 col-sm-12' id="form-div">
<h2><span>Apply for Loan</h2>
<form action="" method="POST" id="html-form">
<div id="form">
<section class="form-section">
<p>Enter Your Name</p>
<input type="text" name="name" class="class-requires-validation" maxlength="35" required id="name-input">
<p class="custom-error" id="custom-error-name-input"></p>
<p>Enter Your Mobile No.</p>
<input type="tel" name="tel" class="class-requires-validation" maxlength="10" required id="mobile-input">
<p class="custom-error" id="custom-error-mobile-input"></p>
</section>
</div>
<button class="btn btn-default" id='form-btn'>Apply Now</button>
</form>
</div>
</div>
<!-- treatments covered small screen -->
<div id='treatments-div' class="md-hidden">
<h2>Treatments Covered</h2>
<div class='row treatments-row'>
<div class="col-sm-6 col-md-6 treatment-cards">
<img src="<?php echo e(asset('/images/icons/maternity.png')); ?>" alt="">
<span>Maternity Cover</span>
</div>
<div class="col-sm-6 col-md-6 treatment-cards">
<img src="<?php echo e(asset('/images/icons/brain.png')); ?>" alt="">
<span>Organ Transplant</span>
</div>
</div>
<div class='row treatments-row'>
<div class="col-sm-6 col-md-6 treatment-cards">
<img src="<?php echo e(asset('/images/icons/hospital.png')); ?>" alt="">
<span>Hospital Admission</span>
</div>
<div class="col-sm-6 col-md-6 treatment-cards">
<img src="<?php echo e(asset('/images/icons/make-up.png')); ?>" alt="">
<span>Cosmetic Treatment</span>
</div>
</div>
<div class='row treatments-row'>
<div class="col-sm-6 col-md-6 treatment-cards">
<img src="<?php echo e(asset('/images/icons/serum.png')); ?>" alt="">
<span>Day Care Surgery</span>
</div>
<div class="col-sm-6 col-md-6 treatment-cards">
<img src="<?php echo e(asset('/images/icons/reproduction.png')); ?>" alt="">
<span>Infertility Treatments</span>
</div>
</div>
</div>
<!-- treatments covered large screen -->
<div id='treatments-div' class="sm-hidden">
<h2>Treatments Covered</h2>
<div class='row treatments-row'>
<div class="col-sm-6 col-md-4 treatment-cards">
<img src="<?php echo e(asset('/images/icons/maternity.png')); ?>" alt="">
<span>Maternity Cover</span>
</div>
<div class="col-sm-6 col-md-4 treatment-cards">
<img src="<?php echo e(asset('/images/icons/brain.png')); ?>" alt="">
<span>Organ Transplant</span>
</div>
<div class="col-sm-6 col-md-4 treatment-cards">
<img src="<?php echo e(asset('/images/icons/hospital.png')); ?>" alt="">
<span>Hospital Admission</span>
</div>
<div class="col-sm-6 col-md-4 treatment-cards">
<img src="<?php echo e(asset('/images/icons/make-up.png')); ?>" alt="">
<span>Cosmetic Treatment</span>
</div>
<div class="col-sm-6 col-md-4 treatment-cards">
<img src="<?php echo e(asset('/images/icons/serum.png')); ?>" alt="">
<span>Day Care Surgery</span>
</div>
<div class="col-sm-6 col-md-4 treatment-cards">
<img src="<?php echo e(asset('/images/icons/reproduction.png')); ?>" alt="">
<span>Infertility Treatments</span>
</div>
</div>
</div>
<!-- video -->
<div class="row" id="parent-video-div">
<div class='col-md-offset-1 col-md-10 col-sm-12' id="video-div">
<!-- <video width="775" controls>
<source src="https://www.youtube.com/embed/tgbNymZ7vqY" type="video/mp4">
<source src="https://www.youtube.com/embed/tgbNymZ7vqY" type="video/ogg">
Your browser does not support HTML5 video.
</video> -->
<iframe width="775" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY" allowfullscreen frameborder='0'>
</iframe>
</div>
</div>
<!-- faq -->
<!-- testimonials -->
<div class="row testimonial-row">
<h2 id="testimonials-title">What our client says about us ?</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="testimonial-card">
<p>
I had to spend 4 lakhs on my treatment and credit cards were charging high interest after 45 days, got timely help from LetsMD to pay in 18 months without any interest cost. Kudos to LetsMD team
</p>
<img src="<?php echo e(asset('/images/icons/dic.png')); ?>" alt="">
<p>- Rishabh Bhatnagar</p>
</div>
</div>
<div class="item">
<div class="testimonial-card">
<p>
My wife was suffering from Dengue which was not covered under her medical insurance, it required platelet transfusion, and 5 days of hospitalisation. Thanks to our Medical Card we were able to pay for the treatment cost in Interest free EMI"s
</p>
<img src="<?php echo e(asset('/images/icons/dic.png')); ?>" alt="">
<p>- Himanshu Sehgal</p>
</div>
</div>
<div class="item">
<div class="testimonial-card">
<p>
After my marriage I got to know that I can not include father in my medical insurance policy. I was forced to buy a separate policy with premium of Rs 30k instead of normal 10k. LetsMD Medical Card came to my rescue where I included my father at just additional cost of Rs 500.
</p>
<img src="<?php echo e(asset('/images/icons/dic.png')); ?>" alt="">
<p>- Kokila Srivastava</p>
</div>
</div>
<div class="item">
<div class="testimonial-card">
<p>
I got admitted for severe stomach pain and was well covered by Health Insurance. It was found to be Appendicitis and doctor told me that operation is needed. My insurance company took more than a day to approve a cashless operations while I went through unbearable pain. Finally I had to arrange money from my friend for operation done as insurance company was taking time. Now i have taken the card to ensure I get cash whenever i need without a wait.
</p>
<img src="<?php echo e(asset('/images/icons/dic.png')); ?>" alt="">
<p>- Ashish Sinha</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- media mentions -->
<div class="row">
<div class='col-md-offset-1 col-md-10 col-sm-12' id="media-mentions-div">
<h2><span>MEDIA</span> MENTIONS</h2>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-sm-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/2017.10.06_09-23-18bhaskar.png')); ?>">
</div>
<div class="col-md-2 col-sm-3">
<img class="img-responsive" class="img-responsive"src="<?php echo e(asset('/web/loancard/Media/vccircle.png')); ?>">
</div>
<div class="col-md-2 col-sm-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/TheHindu-Logo.png')); ?>">
</div>
<div class="col-md-2 col-sm-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/Zee-Business-CS6-1110x550.png')); ?>">
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-sm-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/dribbble_001_2x.png')); ?>">
</div>
<div class="col-md-2 col-sm-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/the-economic-times-logo-png-1.png')); ?>" >
</div>
<div class="col-md-2 col-sm-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yahoo-logo-png-transparent-background-768x256.png')); ?>">
</div>
<div class="col-md-2 col-sm-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yourstory.png')); ?>">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row" id='footer'>
<div class="col-md-6 col-sm-6 pull-left">
<p>Copyright © {{ date('Y') }} LetsMD. All rights reserved </p>
</div>
<div class="col-md-offset-1 col-md-5 col-sm-6 pull-right">
<p>
<span>Get social with us</span>
<a href="https://www.facebook.com/LetsMDMedbay/" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://www.youtube.com/channel/UC4urUJpHcA9LpeRQ1O2hdjw" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube-play fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://in.linkedin.com/company/letsmd" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</p>
</div>
</div>
</div>
Файл CSS:
#main-logo {
width: 50%;
margin-top: 5%;
}
.sm-hidden {
display: block;
}
.md-hidden {
display: none;
}
#banner-text-div button {
color: white;
box-shadow: 3px 3px 15px black;
border: none;
font-size: 170%;
padding: 10px 20px;
}
#banner-text-div button:hover {
font-size: 175%;
transition: all 0.2s;
box-shadow: 6px 6px 15px black;
}
#banner-text-div button:focus {
outline:0;
}
#form-btn:focus {
outline:0;
}
.container-fluid {
margin: 0 !important;
padding: 0 !important;
}
#banner-container {
background-image: url('/images/family.jpg');
background-size: cover;
min-height: 400px !important;
padding-top: 20%;
position: relative;
}
#banner-text-div {
color: white;
margin: 0 auto;
width: 70% !important;
text-align: left;
position: absolute;
left: 15%;
top: 10%;
}
#banner-text-div h1 {
font-size: 230%;
font-weight: bolder;
font-style: italic;
line-height: 30%;
}
#banner-text-div h2 {
font-size: 200%;
line-height: 30%;
}
#banner-text-div p {
font-size: 125%;
line-height: 75%
}
#banner-text-div section {
margin: 5% 0;
}
#form-div {
background: #f1efef;
}
#form-div h2, #media-mentions-div h2, #table-div h2 {
text-align: center;
margin-top: 3%;
margin-bottom: 3%;
}
#form {
background: white;
padding: 1% 5%;
box-shadow: 10px 10px 20px lightgrey;
width: 40% !important;
margin: 0 auto;
padding-bottom: 3%;
}
#form section p {
font-size: 150%;
color: #306577;
margin-top: 10%;
}
#form section select, #form section input[type='text'], #form section input[type='tel'], #form section input[type='email'] {
width: 100%;
border: none;
outline: none;
border-bottom: 2px solid #306577;
background: white;
font-size: 175%;
margin-bottom: 5%;
}
#form-btn {
width: 40%;
margin: 3% 30%;
text-align: center;
color: white;
background-image: linear-gradient(to right, #105e7b , #44b649);
box-shadow: 3px 3px 15px black;
border: none;
font-size: 170% !important;
font-weight: bold;
padding: 10px 20px;
margin-bottom: 5%;
}
#form-btn:hover {
font-size: 175%;
transition: all 0.2s;
box-shadow: 6px 6px 15px black;
}
#media-mentions-div h2{
margin-bottom: 0%;
}
#media-mentions-div .row div img.img-responsive {
padding: 0 10px;
}
#footer {
background: grey;
color: white;
margin-top: 0% !important
}
#footer div p {
font-size: 150%;
text-align: center;
margin-top: 3%;
}
#footer div p a {
color: white;
}
#footer div p a span i.fa-inverse {
color: grey;
}
.validation-error {
border: 2px solid red !important;
}
input.class-requires-validation {
padding: 0 2%;
}
#features-and-benifits-heading {
font-size: 200%;
text-align: center;
margin-top: 2%;
font-weight: bolder;
}
#features-and-benifits-row {
margin-top: -5%;
}
.cards-row {
margin: 3%;
}
.cards p {
font-size: 150%;
min-height: 200px !important;
padding: 19% 25% !important;
text-align: center;
line-height: 115%;
box-shadow: 0px 10px 15px lightgrey;
}
.cards p span {
color: #ef810a;
}
iframe {
width: 63%;
margin-left: 19% !important;
z-index: 100;
}
#video-div {
background: #f1efef;
padding: 5% 0;
}
#parent-video-div {
background: #f1efef;
}
.treatment-cards {
min-height: 50px !important;
padding: 2%;
}
.treatment-cards span {
font-size: 125%;
display: inline-block; !important;
vertical-align: middle;
padding-left: 3% !important;
color: #306577;
}
.treatment-cards img {
display: inline-block; !important;
width: 30%;
vertical-align: middle !important;
}
#treatments-div {
padding: 2% 13%;
}
#treatments-div h2 {
text-align: center;
font-size: 200%;
}
/*faqs start*/
.wrapper{
width:85%;
}
.panel-heading {
padding: 0;
border: 0;
background: white !important;
padding-left: 0 !important;
}
.panel-title>a, .panel-title>a:active{
display:block;
padding:15px;
color:#555;
font-weight:bold;
letter-spacing:1px;
word-spacing:3px;
text-decoration:none;
padding-left: 0 !important;
}
.panel-heading a:before {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
transition: all 0.5s;
}
.panel-heading.active a:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.panel {
border-radius: 0px !important;
}
hr {
border-top: 1px solid #306577 !important;
margin: 0% !important;
}
.panel-body {
padding-left: 0 !important;
padding-right: 10% !important;
font-size: 110%;
}
a, a:link, a:visited, a:hover {
text-decoration : none !important;
}
.panel-title a {
font-size: 125%;
color: #306577 !important;
}
.panel-group, .panel, .panel-default, .panel-heading, .panel-title, .panel-collapse, .collapse, .panel-body {
border: 0 !important;
border: none !important;
}
#faqs-heading {
text-align: center;
font-size: 200%;
margin: 2%;
}
.panel-group {
margin-bottom: 5% !important;
}
/*faqs end*/
.testimonial-row {
background: #f1efef;
padding: 1% 0%;
padding-bottom: 3%;
}
#myCarousel {
background: #f1efef;
padding: 2% 10%;
}
.carousel-inner .item {
box-shadow: 10px 10px 10px lightgrey !important;
}
.testimonial-card {
background: white;
min-height: 250px;
font-size: 150% !important;
padding: 10% 10%;
position: relative;
}
.carousel-control {
background: transparent !important ;
}
.carousel-indicators {
bottom: -15px !important;
}
.carousel-indicators li {
color: grey !important;
background: grey !important;
border: 1px solid grey !important;
}
.carousel-indicators li.active {
color: black !important;
background: black !important;
border: 1px solid black !important;
}
.testimonial-card p:nth-child(1) {
text-align: center;
}
.testimonial-card p:nth-child(3) {
text-align: right;
font-style: italic;
}
#testimonials-title, #media-mentions-div h2 {
text-align: center;
font-size: 200%;
}
.testimonial-card img {
position: absolute;
width: 15%;
top: 20px;
left: -10px;
}
.carousel-inner {
position: relative;
width: 75% !important;
overflow: hidden;
margin: 0 auto !important;
}
#card-with-little-text p {
padding-top: 26% !important;
}
.custom-error {
display: none;
font-size: 100% !important;
margin: 0% !important;
color: crimson !important;
}
/*mobile*/
@media (max-width: 992px) {
/*faqs start*/
.wrapper{
width:85%;
}
/*faqs end*/
.custom-error {
font-size: 225% !important;
}
#header {
text-align: center;
margin: 0 5%;
margin-top: 1%;
}
#header a img {
width: 100%;
}
.md-hidden {
display: block;
}
.sm-hidden {
display: none;
}
#banner-text-div {
width: 85% !important;
position: absolute;
left: 7%;
top: 25%;
}
#banner-text-div h2:nth-child(2) {
line-height: 20%;
}
#banner-text-div button {
padding: 15px 35px;
font-size: 300%;
margin-bottom: 10%;
}
#form-div h2 {
font-size: 350%;
}
#form {
width: 85% !important;
padding: 8%;
}
#form section p {
font-size: 275%;
}
#form section select, #form section input[type='text'], #form section input[type='tel'], #form section input[type='email'] {
font-size: 275%;
}
#form-btn {
margin: 10% 7%;
width: 86%;
font-size: 350% !important;
border-radius: 6px;
}
#media-mentions-div div.row {
padding: 0% 5% !important;
}
#media-mentions-div {
margin-bottom: 50px !important;
}
#banner-text-div {
top: 10% !important;
}
#form-div h2 {
margin-top: 10% !important;
margin-bottom: 5% !important;
}
#form-btn {
width: 85% !important;
margin: 8% !important;
margin-bottom: 10% !important;
}
#form {
width: 50% !important !important;
}
#treatments-div h2 {
text-align: center !important;
font-size: 350% !important;
}
#treatments-div {
padding: 5% 13% !important;
}
.treatment-cards {
display: table !important;
padding: 5%;
}
.treatment-cards img {
width: 150px !important;
margin-top: 15% !important;
display: table-cell !important;
}
.treatment-cards span {
font-size: 225% !important;
display: table-cell !important;
padding-left: 10% !important;
}
#features-and-benifits-heading {
font-size: 300% !important;
text-align: center;
margin-top: 5% !important;
font-weight: bolder;
}
.cards-row {
margin: 10%;
}
.cards p {
font-size: 250% !important;
min-height: 300px !important;
padding: 25% 10% !important;
text-align: center !important;
line-height: 115% !important;
box-shadow: 0px 10px 15px lightgrey !important;
}
iframe {
width: 83% !important;
margin-left: 9% !important;
}
#faqs-heading {
text-align: center;
font-size: 300% !important;
margin: 4% !important;
}
.panel-title a {
font-size: 175%;
}
.panel-body {
font-size: 200% !important;
}
.panel-group {
margin-bottom: 10% !important;
}
#testimonials-title, #media-mentions-div h2 {
font-size: 300% !important;
margin: 5%;
}
.testimonial-row {
padding: 1% 0% !important;
padding-bottom: 10% !important;
}
#myCarousel {
padding: 0% 10% !important;
}
.testimonial-card {
background: white;
min-height: 300px !important;
font-size: 250% !important;
}
#media-mentions-div {
margin-bottom: 4%;
}
#banner-text-div h1 {
font-size: 330% !important;
line-height: 100% !important;
}
#banner-text-div h2 {
font-size: 300% !important;
line-height: 100% !important;
}
#banner-text-div p {
font-size: 250% !important;
line-height: 100% !important;
}
#banner-container {
min-height: 650px !important;
}
.carousel-inner {
width: 100% !important;
}
.carousel-indicators {
bottom: -60px !important;
}
}
Снимок экрана (рабочий стол):
Снимок экрана (мобильный):