my client wanted to convert all images into webp, so I had to use the picture tag to do so, but the final result is a picture tag with 0x0(checked in the google inspector), not sure if that is correct, I do see the picture being served (not sure if it is the webp or png because in the inspector they both load up)
<picture class="mx-auto absolute z-10 -mt-28 left-1/2 -ml-14">
<source type="image/webp" srcset="http://localhost/images/pirate-footer.webp">
<source type="image/png" srcset="http:///localhost/images/pirate-footer.png">
<img id="pirate-img-footer" class="mx-auto absolute z-10 -mt-28 left-1/2 -ml-14" src="http://localhost/images/pirate-footer.png" alt="" loading="lazy">
</picture>
Also not sure if I should load the class styles also in the picture tag and only in the img tag, this example breaks the positioning of the image because there is two position fixed
Related
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 have view port ~1200px and picture container has 180px. This code:
<picture>
<img srcset="img_180.jpg 180w, img_350.jpg 350w" src="img_350.jpg" alt="">
</picture>
loads img_350.jpg. Why it happens if image container is 180px?
Okey, maybe I have to set sizes attribute. My picture container is 180px if view port is > 576px, else it has 100% width. So this code:
<picture>
<img sizes="(min-width: 576px) 180px, 100vw" srcset="img_180.jpg 180w, img_350.jpg 350w" src="img_350.jpg" alt="">
</picture>
loads both img_180.jpg and img_350.jpg. How to fix this? I need to load img_180.jpg only if user has > 576px view port, else load img_350.jpg, because if <= 576 px picture container has 100% width.
You might think because img_350.jpg loads automatically from src, but that's not right, because I added <source ... type="image/webp"> and it loaded img_180.webp and img_350.webp (no .jpg).
https://jsfiddle.net/wLprbk7j/
This is because you have both src and srcset defined. Remove src attribute. This will let browsers calculate the src based on srcset and media queries. Browser will then automatically load the correct image.
As a fallback, remember to include picturefill.js
I am using img tag but its not working this is my code
<img src="resources/images/dsr_sprites.png" ></img>
and I have also use that type
<img src="resources/images/dsr_sprites.png" />
but when I open in firebug that have no close tag and we we use that code for itextpdf its also showing error message that img close tag is missing
Img tag is self closing, also on html 5 you can if you want, not closing the tag.
xHtml:
<img src="image.jpg" alt="My image" />
Html5
<img src="image.jpg" alt="My image">
Please dont forget the alt attribute.
i think you use this type your image tag:
<img src="../resources/images/dsr_sprites.png" />
It looks like you're using the incorrect path, so your HTML can't find your image anywhere.
The second tag is correct, but your path needs to be relative. Check out this article for more on the difference between absolute and relative paths.
<img src="../resources/images/dsr_sprites.png" alt="Sprites"/>
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.
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