How can i use the <picture> Tag with Tailwind CSS? Or more specifically, how can I use Tailwind's media queries in it?
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Related
I have a piece of code here that shows a video in a green box which is for a website I'm developing. The source obviously wouldn't work so I've just replaced it with 'xxxxxx'.
The problem is that there is a small space underneath the video where the box is too big.
For some reason the box isn't flush with the video.
The sides of the video are purposefully not touching the edges but I wanted the bottom and top of the video to touch the box.
I'm sure it can't be too complicated and it's probably something simple that I've missed.
If you need any more info just ask.
Thanks guys.
<div style="background-color:#B9CFBB" align="middle">
<video width="360" height="240" controls>
<source src="xxxxxx">
Your browser does not support the video tag.
</video>
</div>
You should give the video display: block; style
video {
/* video has a default display of inline */
display: block;
}
<div style="background-color:#B9CFBB" align="middle">
<video width="360" height="240" controls>
<source src="xxxxxx">
Your browser does not support the video tag.
</video>
</div>
This is because an inline element is display in line with surrounding text content. This may be empty in this case, but it has a line-height: As the default vertical-align of video is baseline, the descenders need room, too. That is where the gap comes from.
You could change the vertical-align as well of video like illustrated below (I added text to demonstrate the issue.) to solve the issue.
div {
text-align: center;
}
video {
/* video has a default display of inline */
display: inline;
}
#two video {
/* video has a default vertical-align of baseline */
vertical-align: text-top;
}
#three video {
vertical-align: -3em;
}
<div id="one" style="background-color:#B9CFBB">
fghpq before <video width="360" height="240" controls>
<source src="xxxxxx">
Your browser does not support the video tag.
</video> after fghpq
</div>
<div id="two" style="background-color:#F9CFBB">
fghpq before <video width="360" height="240" controls>
<source src="xxxxxx">
Your browser does not support the video tag.
</video> after fghpq
</div>
<div id="three" style="background-color:#B9CFFB">
fghpq before <video width="360" height="240" controls>
<source src="xxxxxx">
Your browser does not support the video tag.
</video> after fghpq
</div>
I think changing the height to 200px and adding display: block will work. Like this one
<div style="background-color:#B9CFBB" align="middle">
<video controls style="width:360px;height:200px;display:block;" preload="metadata">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm#t=0"
type='video/webm;codecs="vp8, vorbis"' />
<source src="devstories.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
Use display:block as style for video element, it will solve your problem.
video {
display:block;
}
For performance reasons, I want to use large-size images for desktop and smaller-size ones for mobile devices as my carousel slides.
I tried below code with only limited success:
<picture>
<source srcset="images/s2.jpg" media="(min-width: 768px)">
<source srcset="images/s2m.jpg">
<img class="second-slide" srcset="images/s2m.jpg" alt="2">
</picture>
Where s2m.jpg is the default (small) image and s2.jpg is the larger one.
The carousel works and selects the correct image depending on the screen size, but loses original responsiveness. That is, slides are not resized to the width of the parent element (.item). Instead, they are just cropped.
What is the proper way of achieving this?
In my opinion the problem can be solved with the HiSRC Framework - https://github.com/teleject/hisrc. You can then use the attributes data-1x or data-2x in the -Tag to define the different sized image sources in it:
For example:
<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>
and insert the following jQuery Code in your Script to "activate" the HiSRC-Framework and give the Element around the pictures the class "hisrc":
$(document).ready(function(){
$(".hisrc img").hisrc();
$(".hisrc img+img").hisrc({
useTransparentGif: true,
speedTestUri: '50K.jpg'
});
})
<div class="hisrc">
<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>
</div>
Hopefully it is helpful for you ;)
Actually, when you resize the window, the carousel is not supposed to decrease in height to cope with the changing width. This will distort the view of the page. It's the feature of bootstrap carousel to do so.
Regarding responsiveness, when you load the page in small devices (I mean no resizing in desktop browser) you will see the relevant slide image is only loaded anyway. I think this should work for you.
However, if you require to resize the images in height when width decreases, you can achieve using CSS
img{
width: 100%;
}
See this codepen for information.
Note: You might not want to impose the style to all <img>, so use wisely
Just create a css class and use it as follow:
.fitImage {
width: 100%;
box-sizing:border-box;
}
<picture>
<source srcset="images/s2.jpg" media="(min-width: 768px)">
<source srcset="images/s2m.jpg">
<img class="fitImage second-slide" srcset="images/s2m.jpg" alt="2">
</picture>
I did it like this:
<div class="carousel slide d-none d-sm-block" data-ride="carousel" data-interval="4000" data-pause="hover">
<div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
<div class="carousel-item active" style="cursor: default;">
<img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/autoskola.jpg" alt="" src="/images/carousel/autoskola.jpg">
<div class="carousel-caption">
<p class="welcome_message"></p>
<p class="slogan"></p>
</div>
</div>
</div>
</div>
<div class="carousel slide d-block d-sm-none" data-ride="carousel" data-interval="4000" data-pause="hover">
<div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
<div class="carousel-item active" style="cursor: default;">
<img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/baner-mobilni.jpg" alt="" src="/images/carousel/baner-mobilni.jpg">
<div class="carousel-caption">
<p class="welcome_message"></p>
<p class="slogan"></p>
</div>
</div>
</div>
</div>
so with d-none d-sm-block and d-block d-sm-none will hide / show carousel for certain screen sizes and with lsrc I will disable loading images, note that I will rename it back to src with javascript.
I have used bootstrap to have responsive video , but problem is I have only 2 sizes
class="embed-responsive embed-responsive-16by9"
and
class="embed-responsive embed-responsive-4by3"
these are really huge. how can i change width and height manually , if i try with this
style="width:400px ; height:400px"
the video is re sized but the responsive does not work.
please help me .
this is my code
<div align="center" class="embed-responsive embed-responsive-16by9" style="width:400px;height:400px">
<video class="embed-responsive-item" controls>
<source src="<?php echo str_replace("../../../../","",$subvalue->video);?>" type="video/mp4">
</video>
</div>
i need like this
but after adding style width and height i get like this
The Responsive Embed classes only set the aspect-ratio (use .embed-responsive-16by9 for a 16x9 video and .embed-responsive-4by3 for a 4x3 one). They'll take up 100% of the width of their containing block.
In order to give them a width, you'll only need to add a container, for example .sizer, that has a width set.
.sizer {
width: 300px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="sizer">
<div class="embed-responsive embed-responsive-16by9">
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls></video>
</div>
</div>
Another option is to add it inside a Bootstrap grid like this
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="embed-responsive embed-responsive-16by9">
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls></video>
</div>
</div>
</div>
</div>
Never try to add the width and height properties directly to the element with the class .embed-responsive as that will break its responsiveness. It is not needed to add .embed-responsive-item unless you want an item different from iframe, embed, object or video.
Go grab fitvids js and as long as you start with width and height dimensions fitvids will make that video responsive: http://fitvidsjs.com
how can I remove the black background from a html5 video? It appears for a few seconds while loading. Using CSS didn't work.
The HTML:
<div id="start-screen">
<video id="video-element">
<source src="video-mp4.mp4" type="video/mp4">
<source src="video-oggtheora.ogv" type="video/ogg">
</video>
</div>
The CSS (not working):
#start-screen, video-element {
background-color: #fff !important;
}
Thanks!
I didn't find a working solution with CSS. But what I found was that using a very small, white (or whatever color you want) poster image does the trick. So if you have the same problem, that's how I did it. I just used a 100x100px PNG file (~ 1KB in size).
<div id="start-screen">
<video id="video-element" poster="/images/white-poster-image.png">
<source src="video-mp4.mp4" type="video/mp4">
<source src="video-oggtheora.ogv" type="video/ogg">
</video>
</div>
Have fun!
I am having some issues with the bootstrap grid system.
I usually use fluid layout for my projects and have no issues. I am using the NON-FLUID layout, and somehow, my project only spans for about half the page, somehow not centering.
Any help?
Link: http://tsa.aws.af.cm
Add one Div with class container as below mention
as like this
<div class="container"> // add this line
<div class="span12">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="" volume="0"> <source src="videos/splash.ogv" type="video/ogg ogv" ;="" codecs="theora, vorbis"><source src="videos/splash.mp4" type="video/mp4"> Video not supported </video>
<h1 class="text-center">Monta Vista TSA grows careers and accelerates lives</h1><br>
<p class="text-center">See what our members think and join now</p>
</div>
</div> // add this line
<body>
<div class="container">
...
</div>
</body>
This the example given for fixed width layout, can you double check your code.