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
Related
I am attempting to show a HTML video tag in a triangle display. So, as opposed to the default rectangle display; a triangle. Meaning, here's the default display:
<!DOCTYPE html>
<html>
<head>
<title>Video Default</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Notice how the default display is the rectangle form - my aim is to get the display in a triangle form - like this:
I am trying to use CSS to accomplish this task, specifically border-top-left radius and border-top-right-radius, but I can only get it to curve. Here's the code below:
video {
border-top-left-radius: 200px;
border-top-right-radius: 200px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
</body>
</html>
The problem I'm running into, as you can see from the code snippet above, the left and right angles only curve as opposed to forming a point. Therefore, is it possible to create a triangle display of a HTML video tag using CSS border-radius? Or can someone provide some additional guidance as to what I should be using to accomplish this task?
I doubt this is possible with border-radius.
But you can achieve this with clip-path
video {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
</body>
</html>
<div class="col-lg-6 col-md-8 embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" width="100%" controls="controls">
<source src="files/video.mp4" type="video/mp4">
</video>
</div>
I have tried different things but the video width won't fit the controls. I noticed that if I don't specify the width and set the Height to "auto" it does fit perfectly but the controls don't show anymore.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>page1</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.center{
position: fixed;
right: 0em;
top: 0em;
min-width: 100%;
min-height: 90%;
image-resolution: 90%;
}
</style>
</head>
<body>
<video class="center" width="100%" loop="true" autoplay="autoplay" controls muted>
<source src="files/video.mp4" type="video/mp4"/>
</video>
</body>
</html>
Try adding fullscreen styles! and never forget to mute if you wanna autoplay!
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 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"
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.