问题描述
我正在使用 html、css 和 bootstrap 为我的播客建立一个网站，我的问题是我想将播客的播放器放在网站的英雄图像部分，这样人们就可以来听我的播客进入网站的那一刻。我希望播放器使用我的播客的 RSS 提要总是用最新的剧集更新播放器，我一直试图寻找解决方案，但我找到了任何东西。我在堆栈溢出上做了一个帐户，以联系该领域的一些专家来帮助我解决这个问题。我将附上一些设计图片以更好地说明我的问题：So this is how I want it to look like我只需要它来播放播客并在每次上传新剧集时得到更新。
我把我的代码放在了现在，看看是否有助于解决这个问题。谢谢大家！
@charset "utf-8";
/* CSS Document */
.wrapper {
background: transparent linear-gradient(180deg,#07050B 0%,#18191F 48%,#2A2E34 100%) 0% 0% no-repeat padding-Box;
margin-top: -60px;
padding-top: 40px;
}
.navbar {
margin: 62px auto auto 141px;
}
.navbar-brand img {
max-width: 60%;
}
.nav ul {
margin: -45px auto auto;
padding-left: 700px;
list-style: none;
display: table;
width: 38px;
text-align: left;
}
.nav li {
display: table-cell;
position: relative;
padding-right: 10px;
}
.nav a {
color: #fff;
text-decoration: none;
display: flex;
position: relative;
font-size: 14px;
}
.nav a:after {
bottom: 0;
content: "";
display: block;
height: 4px;
left: 10%;
position: absolute;
background: #FFE064;
transition: 0.1s ease 0s,center 0.3s ease 0s;
width: 0;
}
.nav a:hover:after {
width: 100%;
left: 1px;
}
.nav a:hover {
font-weight: bold;
}
#Component_6_1 {
scroll-behavior: smooth;
display: flex;
margin-bottom: 30px;
}
#heroImage {
padding-top: 140px;
padding-bottom: 160px;
}
#Calltoaction{
font-size: 45px;
font-weight: 900;
letter-spacing: 4px;
}
.platfomrs {
margin-right: 80px;
}
.platfomrs a {
padding-left: 21px;
}
#calltoaction {
background-color: #FFE064;
}
.titulo {
font-size: 45px;
font-weight: 900;
letter-spacing: 4px;
margin-top: 75px;
}
#blog {
display: flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<!-- required Meta tags -->
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<Meta name="author" content="Sealights Designs">
<Meta name="description" content="El podcast Libertario es el lugar donde aprendes a recuperar tu libertad de pensamiento,donde hablamos temas desde filosofia hasta economia y como tu,el individuo,puedes ser mas feliz con mas libertad">
<Meta name="keywords" content="HTML,CSS,JavaScript">
<!-- Title -->
<title>podcast Libertario - Inicio</title>
<!-- Links -->
<link rel="shortcut icon" type="image/png" href="favicon.ico/favicon-16x16.png"/>
<link rel="stylesheet" href="css/inicio.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>
<!-- Scripst -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvcwpIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnjsK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<header class="container-fluid">
<nav class="navbar navbar-transparent "> <a class="navbar-brand" href="#"> <img src="images/podcast Libertario logo.svg" alt="logo"/> </a> </nav>
<div class="nav">
<ul>
<li><a class="nav-item nav-link text-white" href="#">Inicio</a></li>
<li><a class="nav-item nav-link text-white" href="#">Episodios</a></li>
<li><a class="nav-item nav-link text-white" href="#">Blog</a></li>
<li><a class="nav-item nav-link text-white" href="#">Descargas</a></li>
<li><a class="nav-item nav-link text-white text-Nowrap" href="#">Sobre Nosotros</a></li>
<li><a class="nav-item nav-link text-white" href="#">Contacto</a></li>
</ul>
</div>
</header>
<article class="conteiner-fluid">
<div id="heroImage" class="d-flex justify-content-center">
<aside> <img src="images/copia de logolittle.jpg" width="400" height="400" alt="Cover"/>
<audio controls>
<source src="http://cast.rocks/hosting/24334/85-Himno-destazandolibros.mp3" type="audio/mpeg">
</audio>
</aside>
</div>
<section class="d-flex justify-content-center"> <a href="#anfitriones container-fluid">
<svg id="Component_6_1" data-name="Component 6 – 1" xmlns="http://www.w3.org/2000/svg" width="36" height="19" viewBox="0 0 35.604 18.918">
<path id="Path_2055" data-name="Path 2055" d="M36.732,13.515,39.853,10H4.249L7.2,13.515l14.759,15.4Z" transform="translate(-4.249 -10)" fill="#ffe064"/>
</svg>
</a> </section>
</article>
</div>
<section id="calltoaction" class="container-fluid">
<p id="Calltoaction" class="d-flex justify-content-center">¡ESCUCHANOS EN TODAS LAS PLATAFORMAS!</p>
<div class="platfomrs d-flex justify-content-center">
<ul>
<a class="d-inline-flex" href="#"><img src="images/icons8-spotify@2x.png" width="63" height="63" alt="Spotify"/></a>
<a class="d-inline-flex" href="#"><img src="images/icons8-browse-podcasts-96@2x.png" width="63" height="63" alt="Apple podcast"/></a>
<a class="d-inline-flex" href="#"><img src="images/google_podcast_icon_135536@2x.png" width="63" height="63" alt="Google podcast"/></a>
<a class="d-inline-flex" href="#"><img src="images/ivoox@2x.png" width="63" height="63" alt="iVoox"/></a>
</ul>
</div>
</section>
<blog>
<p class="titulo d-flex justify-content-center">BLOG LIBERTARIO</p>
<div id="blog">
<a><img src="images/Prometheus Justin Kendall's Prometheus -1.png" width="678" height="637" alt=""/></a>
<a><img src="images/superficialidad iceberg.png" width="687" height="319" alt=""/></a>
<a><img src="images/observacion de la realidad binoculars@2x.png" width="343.5" height="300" alt=""/></a>
<a><img src="images/Lo que una amiga...L-1.png" width="343.5" height="300" alt=""/></a>
</div>
</blog>
</body>
<footer></footer>
</html>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）