I have a video that I am trying to position over a section on a website. On my test server the position is perfect but when I upload my new file to the online server the video stays centered and below all the other info on the site. How do I code this so the index1 file displays the video like my test server.
The code on my test server is:
<div class="#main_video" id="main_video">
<video width="460" height="260" controls>
<source src="include/promo_2012.ogv" type="video/ogg">
<source src="include/promo_2012.mp4" type="video/mp4">
</video>
</div>
I selected the div and positioned it at:
Relative<br/>
Top: -414<br/>
Left: -266
Any help would be greatly appreciated.
-Josh
Try,
#main_video{
float:left;
}
This should put it to the left. Here's a live example: http://jsfiddle.net/S6mmD/
And by the way, classes are used in HTML like so: <div class='red'> and in CSS: .red{color:#f00;}
ids are styled in CSS with the pound sign # like above.
Related
I have an interesting issue that I can not seem to figure out. I am using a company to create a website for me and in their templates, they will allow me access to CSS but not to the HTML or Jquery. I need to figure out a way to change the muted too unmuted or be able to remove it.
<video style="height:100%;" loop="" muted="" autoplay="" poster="https://removed from code" playsinline="">
</video>
I can only use css to fix this, any ideas?
<video id="myVideo" src="video.mp4" controls replay autoplay></video>
So I have come across an interesting bug for which I haven't been able to find a solution yet, I have tried the ones I could think of to no result. The issue is as follows -
There are artefacts (horizontal and vertical see-through lines) on the video element if -
border-radius is directly applied to the video element.
border-radius is applied to the parent of the video element, with overflow: hidden.
Example code -
<html>
<body style="color: #fff;background-color: #00f;">
<p>
Original video is hosted at -
<a style="color: #fff"
href="https://streamable.com/6jly2">
https://streamable.com/6jly2
</a>
(create a download link and use it here)
</p>
<h1>Border Radius on VIDEO</h1>
<video width="400px" style="border-radius: 30px;" autoplay muted loop>
<source src="https://dl3.webmfiles.org/big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
<h1>Border Radius on Parent DIV</h1>
<div style="display: inline-block;border-radius: 30px;overflow: hidden;">
<video width="400px" autoplay muted loop>
<source src="https://dl3.webmfiles.org/big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</div>
<h1>Border Radius with Child DIV</h1>
<div style="display: inline-block;border-radius: 30px;overflow: hidden;">
<div style="background-color: yellow;width: 400px;height: 225px;"></div>
</div>
</body>
</html>
Example screenshot (focus hard to see the white lines) -
In the screenshot it seems as the lines are white, but actually they are see-through (compression at work :(), you can reproduce the scenario in your local and see the exact phenomena.
I'm using Chrome 72.0.3626.121 (Official Build) (64-bit) on Mac OS X.
I believe that this issue is being caused by clipping logic that might be used to achieve border-radius effect, don't know for sure. If anyone knows that this is a well document bug please let me know as I wasn't able to find it and hence asking the community here.
I did manage to find one similar issue here - Chrome/WebKit creating a solid bar when using background, border-radius, and top/bottom borders
But doing that resulted to no success. If anyone has any ideas as to why this is happening and what can be the solution (even if not available I will be happy to understand why), please help out.
I'm using simplest html5 audio element like this
<audio controls="controls" preload="auto">
<source src="Happy_Boy_End_Theme.ogg" type="audio/ogg" />
<source src="podcasts/Happy_Boy_End_Theme.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
this result:
I want to
1) change the height of the control - tried these options nothing worked:
<audio controls="controls" preload="auto" height="350px">
<audio controls="controls" preload="auto" style="height: 350px;">
<audio controls="controls" preload="auto" style="height: 50%;">
2) Want to change its built in blue color sliders to red - without "building" my own player.
Sorry, in WinJS is an HTML5 control and currently there is no way to style by using CSS. Instead if you need a custom styled audio player, you could implement it by writing JavaScript code, or use some 3rd party library.
Some styling can be achieved with javascript. See https://serversideup.net/style-the-html-5-audio-element/ for details
I have my code in the html like this for a 40 second video I want on my website. The video converter that I used made my imovie video with an extra video type as you can see below. Is this is what's causing the video not to show up?
<video>
<source src="Hai_Fusion_landing_video.oggtheora.ogv" type="video/.ogv" />
<source src="Hai_Fusion_landing_video.webmhd.webm" type="video/.webm" />
<sporce src="Hai_Fusion_landing_video.mp4.mp4" type="video/.mp4" />
</video>
and my inline styling like this
<style>
video{
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
</style>
Nothing shows up. Also, does the video files have to be from your desktop or do you have to upload them online first so it is sourced from there before playing?
I would also like for it to autoplay and loop on silence if that helps.
<video width="320" height="240" controls>
<source src="Hai_Fusion_landing_video.webmhd.webm" type="video/webm" />
<sporce src="Hai_Fusion_landing_video.mp4.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
I honestly don't know about an .ogv video format support in major browsers.
Remove the dots in the extension type
Add a "does not support message" in case it's an old browser
Check if your video files are in the same folder as your html file, if not, your paths won't work. (Learn about relative paths)
Thanks to #Scooter and #Ed Cottrel for pointing out stuff in the comments.
Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?
I do not understand if it is possible or not, I can't find anything other than this article but it seem uses Javascript.
I would like to make the controls bar fit the video width; as you can see from the image attached, the controls bar excedes the video width.
HTML for the above image
<div class="video centered-content">
<a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
<video width="63%" height="60%" id="video" class="video" controls>
<source src="<?php echo base_static_url();?>media/video.mp4">
<source src="<?php echo base_static_url();?>media/video.ogv">
<source src="<?php echo base_static_url();?>media/video.webm">
</video>
</a>
</div>
Here is a good example for styling native player controls(just tested in Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn
To change the width of the player controls bar:
video::-webkit-media-controls-panel {
width: 40px;
}
You can style native controls in some browsers, using shadow DOM. Enable shadow dom in debug inspector settings:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
HTML5 Video Controls - make larger?
You could style the shadow DOM, but you need to look at every browser individually and a browser update could destroy your styling.
I recommend taking a look at MediaElement.js which gives you cross-browser controls that can be styled using CSS and are already accessibility-optimized.
Or if you only need a few controls anyway, build your own: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics