logo
down
shadow

Video JS - poster image cover/contain


Video JS - poster image cover/contain

By : Tauras Steponavicius
Date : December 01 2020, 04:55 PM
I wish this help you As you've specified the poster as an attribute on the video element, you actually end up with two poster images - one in the video element itself, and another which video.js creates as a div overlaying the video element. Your CSS applies to the .vjs-poster div only. When you play the video, the video.js poster div is hidden and you briefly see the video element's own differently scaled poster.
If instead of using the poster attribute you specify it as an option in data-setup instead, the video element itself won't create a poster image but you'll still have the stylable video.js poster div.
code :


Share : facebook icon twitter icon
Video poster without poster attribute (mobile browsers)

Video poster without poster attribute (mobile browsers)


By : Swapna Rachcha
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further So far I've only ever used MP4 files with the video tag and each time I've not specified a poster image. It has picked up the first frame by default.
I know this information doesn't have any concrete evidence for you and may not help but thought I would share my experience.
How to fill video element with poster image even if the poster image is a different aspect ratio than its video element?

How to fill video element with poster image even if the poster image is a different aspect ratio than its video element?


By : Timo
Date : March 29 2020, 07:55 AM
hop of those help? This question got me thinking and your jsfiddle was useful in solving this (albeit not for IE as it doesn't implement the poster image correctly).
Basically combine what you posted, set the required poster image as the background image of the video element and specify a 2x2 transparent image as the actual poster image.
code :
<video controls poster="transparent.png"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>
video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}
Load video after clicking a button or link inside div and stack the trigger, poster image, and video

Load video after clicking a button or link inside div and stack the trigger, poster image, and video


By : user2954605
Date : November 22 2020, 10:31 AM
How to make a html5 video poster image transparent to see the background image while video is not playing

How to make a html5 video poster image transparent to see the background image while video is not playing


By : Juan Felipe
Date : March 29 2020, 07:55 AM
hop of those help? I am looking for a solution to get a transparent poster image for html5 video. , My solution looks like the following:
code :
<!-- generate an extra button to start the video -->    
<button id="button_teaser" onclick="playPause()">Play</button>

<video class="js-player" poster="poster.jpg" controls playsinline preload="none" id="video_teaser" data-plyr-config='{"volume": 0.3, "resetOnEnd": true, "enabled": true, "storage": { "enabled": false }, "quality": { "default": 720 } }'>
    <source src="video_360p.mp4" type="video/mp4" size="360">   
    <source src="video_720p.mp4" type="video/mp4" size="720">
    <source src="video_1080p.mp4" type="video/mp4" size="1080">
</video>

<!-- hide video -->
<script>
    $('#video_teaser').hide();
</script>

<!-- after clicking the generated play button, hide play button and show video -->
<script>
$(document).ready(function(){
    $('#button_teaser').click(function(){
        $('#video_teaser').show();
        $('#button_teaser').hide();
        $('#video_teaser').get(0).play();
    });
});
</script>

<!-- after playing video automatically hide video and show play button again -->
<script>
$(document).ready(function(){
    $('#video_teaser').on('ended',function(){
    $('#video_teaser').hide();
    $('#button_teaser').show();
    });
});
</script>
video.js display poster image at end of video

video.js display poster image at end of video


By : Philippe Dupuis
Date : March 29 2020, 07:55 AM
it fixes the issue In the future the best way to do this will be through css. I just added an issue for it.
Related Posts Related Posts :
  • Adding a drop down transition to CSS Menu
  • CSS Media Queries not kicking in when there supposed to
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org