Multimedia na stronie

Question

Witam.

Mam problem z wstawieniem piosenki do strony. Ogónie wszystko działa ale otwarzacz otacza czarna ramka i kompletnie nie mam pojecia dlaczego.

.

Ma ktoś jakiś pomysł aby tą ramkę, obramowanie usunąć ?

Answer 1

To czarne to nie musi być ramka (border) tylko kolor tła (background-color) a cały obiekt może mieć jakieś domyślnie ustawienia np. odnośnie wysoki.

Comments

Nadałem temu otwarzaczowi id i w css zmieniałem background-color niestety to nic nie dało. Wiesz jak zmienić te ustawienia ?

---

W Chrome lepiej wygląda

<audio src="muzyka.mp3" controls></audio>

<video src="film.mp4" controls></video>

A jak usuniesz `controls` to `audio` nie będzie całkiem widać
a w `video` zostanie tylko czarne pole do wyświetlania filmu.

Ale wygląda, że nic więcej nie da się z tym zrobić.

---

W przypadku `embed` przeglądarka różnie mi się zachowywała jak sprawdzałem ją w konsoli. Czasami był <embed>, innym razem zmieniło na <iframe><video></iframe>.

---

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Answer 2

Pokaż kod :)

Spróbuj w css w divie z playerem border:none; ale border 0px; ewetualnie to może być padding lub background.

Comments

HTML:
			<div id="content">
				<span class="bigtitle">Polska</span>
				<div style="height: 15px;"></div>
				<div class="dottedline"></div>
				<p>Polska, Rzeczpospolita Polska (RP) – państwo unitarne w Europie Środkowej położone między Morzem Bałtyckim na północy a Sudetami i Karpatami na południu, w przeważającej części w dorzeczu Wisły i Odry. Powierzchnia administracyjna Polski wynosi 312 679 km², co daje jej 70. miejsce na świecie i 9. w Europie. Zamieszkana przez prawie 38,5 miliona ludzi (2014), zajmuje pod względem liczby ludności 34. miejsce na świecie, a 6. w Unii Europejskiej.Od północy Polska graniczy z Rosją (z jej obwodem kaliningradzkim) i Litwą, od wschodu z Białorusią i Ukrainą, od południa ze Słowacją i Czechami, od zachodu z Niemcami. Większość północnej granicy Polski wyznacza wybrzeże Morza Bałtyckiego. Polska Wyłączna Strefa Ekonomiczna na Bałtyku graniczy ze strefami Danii i Szwecji.</p>
				<embed src="MazurekDabrowskiego.mp3" autostart="false" />
			</div>

 

A w CSS nic nie grzebałem :D

---

tu nic nie ma pokaż css

---

body {
	background-color: #303030;
	font-family: 'Lato', sans-serif;
	margin: 0 !important;
	font-size: 20px;
	color: #FFFFFF;
}
#header {
	padding: 40px 0;
	width: 100%;
}
#logo {
	font-size: 42px;
	letter-spacing: 3px;
	font-weight: 900;
	font-family: 'Josefin Sans', sans-serif;

}
#nav {
	background-color: #D4213D;
	text-align: center;
	color: white;
	padding: 10px;
	border: 4px solid #E5324E;
	margin-bottom: 20px;
}
ol {
	list-style-type: none;
	height: 47px;
	line-height: 200%;
	display: inline-block;
	margin: 0;
	font-size: 24px;
}
ol a {
	color: white;
	text-decoration: none;
	display: block;
}
ol > li {
	float: left;
	width: 200px;
}
ol > li:hover {
	background-color: #E5324E;
}
#container {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#sidebar {
	min-height: 720px;
	width: 182px;
	background-color: #D4213D;
	border: 4px solid #E5324E;
	padding: 10px;
	text-align: center;
	float: left;
	font-size: 24px;
}
#content {
	width: 730px;
	min-height: 700px;
	float: left;
	border: 4px solid #dddddd;
	background-color: #cccccc;
	padding: 20px;
	text-align: justify;
	margin-left: 10px;
	color: #000000;
	margin-bottom: 20px;
}
.option {
	border-bottom: 2px dotted #E5324E;
	height: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.option:hover {
	background-color: #E5324E;
}
#socials {
	text-align: center;
	width: 100%;
	margin-bottom: 20px;
}
.socialsdiv {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.fb {
	width: 250px;
	height: 155px;
	float: left;
}
.fb:hover {
	background-color: #4668B3;
}
.tw {
	width: 250px;
	height: 155px;
	float: left;
}
.tw:hover {
	background-color: #3095D3;
}
.yt {
	width: 250px;
	height: 155px;
	float: left;
}
.yt:hover {
	background-color: #D94348;
}
.gplus {
	width: 250px;
	height: 155px;
	float: left;
}
.gplus:hover {
	background-color: #D95333;
}
#footer {
	clear: both;
	background-color: #ff7502;
	min-height: 20px;
	text-align: center;
	padding: 10px;
	border: 4px solid #dd5300;
}
.bigtitle {
	font-size: 32px;
	font-weight: 900;
	letter-spacing: 2px;
	clear:both;
}
.dottedline {
	height: 5px;
	marign-top: 15px;
	margin-bottom: 20px;
	border-bottom: 2px dotted #444444
}
.sticky {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	position: fixed;
}