Im new to Tailwind, I have a video background page (based on that post https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/), I trying to add a pattern ( http://www.patternify.com/ ) on top of that video background. I was tried few different approaches but all of them makes strange things with position of the background.
Can someone show me how it should be done in Tailwind?
You can position an HTML over a video using relative and absolute utility classes like this example.
The absolute div is wrapping the iframe video that you need.
You can position the pattern that you need and change its size with width w-{size} and height h-{size}classes.
<div class="relative">
<div class="relative h-20 w-20 left-40 top-24 z-10" style="background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAGtJREFUKFNjZICCpkN+/+vsNjGCuMaZ1/4faYlg4BS+BOeDGYQUnZ2uxchIjCKQYWATcVkHMglmI043ISsCuZ0Rm8PRFYGt/v5W7z+y77ApAhmG4kZcinbVtkA8A9KBT5Gw1DKIGwkpAhkGAJGtf6rUDvXfAAAAAElFTkSuQmCC) repeat;"></div>
<div class="absolute top-0 w-full">
<iframe width="800" height="600" src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" frameborder="0" allowfullscreen></iframe>
</div>
</div>
You can take a look at the example in the next play.
https://play.tailwindcss.com/QjG6jhiIdN
Related
I am working on a touch screen display for a museum. The screen will display old photos with touchable zones laid on top of it that reveal more information about people/objects show in the photos.
The screen size is fixed (it's a TV) but the photos could be in any aspect ratio; landscape or portrait.
There will be a header and footer at the top and bottom of the screen. In the middle I want to display the photo as large as possible. That is to say:
if the photo is portrait it should span the full height between the header and footer with empty space to the left and right.
if the photo is landscape (more landscape than the TV is) it should span the full width of the screen from left to right with empty space above and below.
This, I believe, is classic object-fit: contain; behaviour.
What I'm struggling with is adding the overlay on top. This consists of many rectangles that a user can touch. I know the top and left position and width and height of each box as a percent of the image it is overlaying.
I have made a tailwind playground here: https://play.tailwindcss.com/1c8QufeAFj
My understand is that I can't add the overlain boxes as children of the <img> tag, so they are placed in a <div> that is the <img> tag's sibling.
<!-- Check out the tailwind playground to see a live preview -->
<div class="flex h-screen flex-col">
<div id="header" class="bg-gray-500 p-6"><p>Header</p></div>
<!-- Main content which grows to fill the space between the header and footer -->
<main class="grow bg-gray-900">
<!-- Wrapper around the img and it's overlay -->
<div id="wrapper" class="relative">
<!-- The image: Should be as large as possible within main content (object contain style behaviour) -->
<img class="h-full w-full" src="https://placekitten.com/600/400" />
<!-- Div container boxes to draw on top of image (and move and scale with the image) -->
<div class="absolute inset-0 z-10">
<!-- Boxes overlaid on each kitten -->
<div style="left:48%; top:28%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
<div style="left:36%; top:29%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:16%; top:33%; width:10%; height:14%;" class="absolute border-2 border-orange-300"></div>
<div style="left:69%; top:43%; width:11%; height:15%;" class="absolute border-2 border-orange-300"></div>
</div>
</div>
</main>
<div id="footer" class="bg-gray-500 p-6"><p>Footer</p></div>
</div>
Since the boxes' positions and sizes are relative to the image, this sibling div must have the same size as the img at all times.
I can't get this to work with object-fit:contain; the sibling div that contains the boxes doesn't have the same size as the img so the boxes don't line up where they are supposed to.
If I try to find a solution without object-fit then I can either get it to work for portrait photos (using h-full) or landscape photos (using w-full) but I haven't managed to find code that works for both portrait and landscape.
I have a title with a fixed width, and I need to set a logo after the last word in the title.
When the title is too long, it takes 2 lines.
Example :
My
Title (logo should go here)
Here is a codepen with tailwind : https://codepen.io/jbrazillier/pen/OJZWYEb
I can only set it below the title, or on the right of the first word.
Since you have fixed size for your h2 you should wrap your image and title in a relative div and your logo should be absolute then use position left-full
by the way you should improve your markup i added the border to show you what i mean
<script src="https://cdn.tailwindcss.com"></script>
<h2 class="w-[40px] flex text-3xl font-bold border">
<div class="relative">My title
<img class="w-8 h-8 absolute bottom-0 left-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Red-circle.svg/1200px-Red-circle.svg.png" alt="" />
</div>
</h2>
I do not understand how to place a color transition effect over an image such as changing the color that will lay on top of the image when i hover over it. Basically i want a hover effect on my image, lets say to the color blue. I tried searching google for this but i cant find any answers to my question. Im new to tailwind but i did try hover:bg-blue-400 but it did not work, im currently using version 3 of tailwind. Here is an example
<div class="flex flex-col items-center rounded-2xl p-6">
<img src="./images/myImage.jpg" alt="image" class="hover:bg-blue-400">
</div>
The answer is make a div with the color of your choice then within that place
the img tag within it lets say hover:opacity-25 then your good. like so...
<div class="bg-blue-400 rounded-xl">
<img src="./image.jpg" alt="image" class="hover:opacity-25 rounded-xl">
</div>
so I'm having an issue trying to use the Bootstrap reponsive embed classes inside a flexbox.
The classes work fine when things are stacked, but if I then use flexbox to place two divs side by side (one containing the video, the other a panel for text info), the video shifts to half width (which is correct) but the height remains the full height as if it were full width.
Nothing I seem to change is making the height stick to the ratio governed by the width changing from the flexbox.
Is this a bug in the responsive embed?
<div id="youtube-container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'youtube', true); ?>"></iframe>
</div>
<div class="info"></div>
</div>
After a think, it dawned on me that the process BS uses to shift the aspect ratio is based on the parent container.
So after just entering a parent div around the responsive div, it works fine.
<div id="youtube-container">
<div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'youtube', true); ?>"></iframe>
</div>
</div>
<div class="info"></div>
</div>
I have two 50% width divs. One is simple image and another one is YouTube embed.
What I want to achieve is to have the same height for both elements (image and video). I need that this would work the same on responsive.
I was trying to use http://embedresponsively.com/ css for video embed, but can't understand how to make it work correctly.
Here is what i want to do:
This is my jsfiddle:
<div class="content">
<div class="left">
<img src="http://placehold.it/756x560/2cb7c0/ffffff">
</div>
<div class="right">
<div class='embed-container'><iframe src='https://www.youtube.com/embed/C7dPqrmDWxs' frameborder='0' allowfullscreen></iframe></div>
</div>
</div>
https://jsfiddle.net/ujddekdf/
You won't be able to resize the youtube video, as the proportions of it are set by the provider. The easiest solution is to resize your image to have the same proportion as the video. Then it also works well on the responsive:
<img src="http://placehold.it/756x424/2cb7c0/ffffff">
https://jsfiddle.net/ujddekdf/1/