body {
margin: 0;
background-color: black;
/* Reset default margin */
font-family: "Arial"
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none;
margin: auto;
margin-top: auto;
margin-bottom: auto; /* Reset default border */
}
.navbar-light navbar-nav nav-link:focus navbar-light navbar-nav nav-link:hover{
color:white;
}
nav{
width: 100%;
padding: 0 50px;
box-sizing: border-box;
text-decoration: none;
color: white;
background: blacK;
}
.navbar-light .navbar-nav .nav-link {
color:white;
text-decoration: none;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: white;
text-decoration: none;
}
nav a{
font-style: 11px;
}
.barrita{
font-size: 11px;
font-family: "Arial";
letter-spacing: 3px;
list-style: none;
transition: .4s;
margin-top: 10px;
}
.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
.navbar-dark navbar-nav nav-link{
padding-left:30px;
padding-right:30px;
}
.logoo{
width: 100%;
height: auto;
}
.hambur{
height: 50
}
.ytLoader{
text-align: center;
}
img.cover{
width: 75%;
margin-top:40px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="description" content="Sitio Oficial de Los Blenders">
<meta name="keywords" content="LosBlenders,Coapa,Musica,AhOh,Los Blenders Sitio Oficial,Ha Sido">
<meta name="author" content="Jesus P">
<link rel="stylesheet" href="css.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="https://i.pinimg.com/originals/68/d5/f8/68d5f8598e4ca7181d150600759f48c3.jpg">
<title>Los Blenders| Sitio Oficial</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" style="text-align:center;margin: auto;">
<img src="http://lafemmemusic.com/wp-content/uploads/2015/05/Logo-La-Femme.png" class="img-fluid logoo" alt="Responsive image">
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark" style="padding-left:30px;
padding-right:30px;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" style="border-color: black;">
<span class="navbar-toggler-icon hambur" style="font-size: 2.25rem;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup" style="padding-left:30px;
padding-right:30px; text-align:center">
<div class="navbar-nav mx-auto barra" style="margin: 13px 13px;letter-spacing: 3px;font-weight: normal;font-size: 11px;padding-left:30px;
padding-right:30px;">
<a class="nav-item nav-link active" href="#" style="color:white;">VIDEOS <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#" style="color:white;">PHOTOS</a>
<a class="nav-item nav-link" href="#" style="color:white;">TOUR</a>
<a class="nav-item nav-link disabled" href="#" style="color:white;">PRO</a>
<a class="nav-item nav-link disabled" href="#" style="color:white;">CONTACT</a>
<a class="nav-item nav-link disabled" href="#" style="color:white;">SHOP</a>
<a class="nav-item nav-link disabled" href="#" style="color:white;">CART</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="video">
<iframe width="1024" height="560" src="https://www.youtube.com/embed/I8uj7QUzCSA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="margin-top:40px;"></iframe>
<iframe width="1024" height="560" src="https://www.youtube.com/embed/vHGLCRdkNP4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="margin-top:40px;"></iframe>
<iframe width="1024" height="560" src="https://www.youtube.com/embed/Uh1fJvNa-o4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="margin-top:40px;"></iframe>
<iframe width="1024" height="560" src="https://www.youtube.com/embed/_0OKXRFUc14?start=112" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="margin-top:40px; margin-bottom:40px;"></iframe>
</div>
</div>
</div>
</div>
<!-- (1) video wrapper -->
<div class="youtube" data-embed="AqcjdkPMPJA">
<!-- (2) the "play" button -->
<div class="play-button"></div>
</div>
<script>
function youTubes_makeDynamic() {
var $ytIframes = $('iframe[src*="youtube.com"]');
$ytIframes.each(function (i,e) {
var $ytFrame = $(e);
var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
var $ytLoader = $('<div class="ytLoader">');
$ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/maxresdefault.jpg">'));
$ytLoader.append($('<img class="playBtn" src="boton.png">'));
$ytLoader.data('$ytFrame',$ytFrame);
$ytFrame.replaceWith($ytLoader);
$ytLoader.click(function () {
var $ytFrame = $ytLoader.data('$ytFrame');
$ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
$ytLoader.replaceWith($ytFrame);
});
});
};
$(document).ready(function () {youTubes_makeDynamic()});
</script>
</body>
</html>
Thanks!! :D I could not put the button in the center of the image, it always stays on the right side of the image}}
I would also like to know how I could adjust the size of the iframe that is generated to be the same size as the thumbnail: D
Here's my Code https://codepen. io/MoroccoSunn/pen/XvgVVp
Thanks!! :D I could not put the button in the center of the image, it always stays on the right side of the image}}
Aucun commentaire:
Enregistrer un commentaire