I need to place the <audio> in top right corner. How to do it?
I tried with the <object> but then I get black bars around the audio player.
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<center>
<body style="background-color: brown">
<h1 style="color:white; font-size:80px">Hello</h1>
<p style="font-size:50px">I like <span style="color:green">turtlez</p>
<audio controls>
<source src="hello.mp3" align="right" type="audio/mpeg">
</audio>
</body>
</center>
Place your audio element into a container, then align the container.
E.g.
<div class="container">
<audio controls>
<source src="hello.mp3" align="right" type="audio/mpeg">
</audio>
</div>
.container {
max-width:200px;
position:absolute;
top:0;
right:0;
}
Try using this code :
audio {
float: right;
margin-top:0;
}
<audio controls src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
Your user agent does not support the HTML5 Audio element.
</audio>
Make sure your src file is included.
Hope it works.
Related
I tried making a looping background video but only the video controls are being displayed on the page, the rest is blank.
<section id="portfolio-cover" data-height="fullscreen">
<div>
<video id="background-video" playsinline autoplay muted loop width="320" height="240" opacity= 50 controls >
<source src="chicago.mp4" type="video/mp4">
</video>
</div>
</section>
I think the problem here is that the src is not being called correctly, is the file in the same folder as your html file? Or is it a link? Because I tested this out with a video link and a proper file path to the video and it works perfectly fine. Try double checking the path of your video file or if its a link, comment it here, so I can show you how to write it down in src=""
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>videobg</title>
<style>
.mainblock{width:100%; float:left; margin:0 auto; padding:0; height:100vh; position:relative; overflow:hidden;}
.mainblock #video-background{
position: absolute;
left: 0;
right:0;
margin:0 auto;
bottom: 0;
min-width: 100%;
min-height: 100%;
width:100%;
}
#media screen and (max-width:1024px){
.mainblock #video-background{width:auto; height:100vh;}
}
</style>
</head>
<body>
<div class="mainblock">
<video preload="metadata" id="video-background" controls="" autoplay="" loop="" playsinline="" muted="">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
Full screen Video tag html
How can I add border-radius to the <video> tag.This is what my video looks like right now:
(image is here: <a href="https://i.stack.imgur.com/izKz0.png")
I already tried doing the video tag with css but it doesn't change.
Here is the code:
/*CSS*/
video {
border-radius: 10px;
}
<!HTML!>
<div class="fp-player">
<center>
<div id="instructions">
<video id="my_video_1" class="video-js vjs-default-skin" width="320" height="240"
controls preload="none" data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }' poster="https://example.org/image.png">
<source src="https://example.org/video.mp4" type='video/mp4' />
</video>
</center>
</div>
Wrap the video in a div and give it this styling,
div {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 320px;
width: 480px;
}
I found this answer at Adding border-radius for embedded YouTube video
Try clearing your browsing history.
Here is an example that may help
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
#video1 {
border-radius:10px;
}
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="320" height="240" controls preload="none">
<source src="https://example.org/video.mp4" type='video/mp4' />
</video>
</body>
</html>
Add "border-radius:10px;" to the style of the video.
I'm trying to make a music website to display my music. I figured out to how to somewhat make a creative player by putting my songs in a box. However, I don't know how to add text to my boxes. Whenever I add text to the it expands the box, making it uneven. Does anyone have any tips on how to add text without making the box uneven?
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 290px;
padding: 25px;
margin: 20px;
}
</style>
</head>
</style>
<body>
<div>
<audio controls>
<source src="Too High.ogg" type="audio/ogg">
<source src="Too High.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div>
<audio controls>
<source src="Visions of the mind.ogg" type="audio/ogg">
<source src="Visions of the mind.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div>
<audio controls>
<source src="Let me know.ogg" type="audio/ogg">
<source src="Let me know.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
You can use min-height to set all the divs to a similar minimum height
div {
background-color: lightgrey;
width: 290px;
padding: 25px;
margin: 20px;
min-height:110px; /*CHANGE THIS NUMBER */
}
<div>
<audio controls>
<source src="Too High.ogg" type="audio/ogg">
<source src="Too High.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
</div>
<div>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
<audio controls>
<source src="Visions of the mind.ogg" type="audio/ogg">
<source src="Visions of the mind.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
<audio controls>
<source src="Let me know.ogg" type="audio/ogg">
<source src="Let me know.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
I am coding an e-card for fathers day but i have run into some problems- my code for playing audio doesn't make the music play. Any advice on how fix this would be much appreciated. Here is the code for the music:
<audio autoplay loop>
<source src="Republic - Rád gondoltam.mp3">
</audio>
And here is the code for the whole thing.
<html>
<head>
<title>Happy Father's Day</title>
<style>
img {
margin: 0;
position: absolute;
top: 50%;
left: 50%
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="Republic - Rád gondoltam.mp3">
</audio>
<center>
<img src="output_tzHVLY.gif" />
</center>
</body>
</html>
You have to add the file type:
<audio autoplay loop>
<source src="Republic - Rád gondoltam.mp3" type="audio/mpeg">
</audio>
Also, I would check for the exact name of the file - "Republic - Rád gondoltam.mp3" seems to be a not-so-good filename (includes spaces and special charcter á) - maybe change the filename to something like "republic_rad_gondoltam.mp3"
Good afternoon,
I have am image and I want to embed the MP3 file associated with the image into/onto the image, instead of having the MP3 under the image.
Is this at all possible.
Kind regards
Gary
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img src="Logoghp.jpg" width="224" height="134" alt=""/><br>
<audio controls>
<embed src="Soul Train Easter 2016 Mke Vitti One Hour Mix Show.mp3" width="32" height="32"></embed>
</audio>
</body>
</html>
Create a "container" div and, inside it, insert your image and an audio element (containing at least a source and a warning message for browsers that don't support it).
Give the "container" the same height of the image, assign the audio element "relative" position, then play with top and left values, e.g.:
.audio-container {
height: 320px;
}
.audio-container audio {
position: relative;
top: -40px;
left: 10px;
}
<div class="audio-container">
<img src="http://www.battiato.it/wp-content/themes/battiato/images/about.jpg">
<br>
<audio controls>
<source src="http://www.battiato.it/wp-content/uploads/mp3/joe/1-leoncavallo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>