I want to see a screen full of embedded video but i am getting black borders on left and right but i have included allow full screen in my coding also.How to remove the borders and see stretched video? I am attaching my code and screen shot .!Screen shot of the borders<iframe id="vid" width="100%" height="100%" src="https://www.youtube.com/embed/RdIh8GiVR9I?autoplay=1&modestbranding=0&controls=0&showinfo=0&rel=0&allowfullscreen=true"></iframe></div>
The answer to this is slightly more complicated.
The "allowfullscreen" is just there for displaying the "fullscreen" button. (Although it's kind of strange)
To make it behave like you want to, have a look at this explanation
(The section with "<iframe>")
Basically, you need to put the video in a div with the full width of the website (what you probably already did) and some css magic to make it the correct height.
Related
In a website I'm creating, I want there to be blank space on both sides of a body with a different background color. When you look at the website on mobile, I want that blank space gone.
simple example for what I want seen on the computer:
(blue background) / (body with information and navigation / (blue background)
Does anyone have a solution for what I'm talking about? I originally had the body's width set to 55% and I could see the alternate sides perfectly, but that of course keeps those sides on mobile, making it hard to read any of the body.
I'm newer to programming so if any of this didn't make any sense just let me know.
Like #Johannes's comment says, you can accomplish this with media queries in CSS. They detect the dimensions of the device and will run CSS if the device width and height are within certain bounds. See more here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
So I just created a blog on Blogspot. And I'm currently using a simple free blog template from the internet.
You can refer my blog here - https://hariinisayarasa.blogspot.com
Im using the free template from here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
As you can see, you can compare the slider image on my blog is blurry and pixelated compared to the one on the Demo Page here - https://sylva-way2themes.blogspot.com/
Is there any way I can resize my image or any setting that can be done in my template coding so that the slider images are not blurry anymore?
Please let me know if I can provide any code for you so that you can help me solve this problem.
Or you can download the code here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element.
Resizing img with HTML
<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg"
width="400"
height="500" />
Resizing img with CSS
img { width: 400px, height: 300px}
From what I've seen, you're using very small raster images.
notice the 'intrinsic size' property
same goes here
Photographs are always saved as raster images. It means that the data of an image is stored in the form of a pixel map - a matrix of squares. If you try to scale the image up, every pixel is also scaled up. Therefore, you lose quality, and the pictures seem pixelated/blurry.
There's no way to keep both the size and detail. Alternatively, you could try to keep the initial size of an image (or at least scale down) - this would, on the other hand, not fill the entire container space.
now check the intrinsic size of one of the images on the demo page
The more scaled image is, the more blurry it gets. The pictures on the demo page have the scale aspect of 2. However, your photo that is 72 x 72px has been scaled up a lot more.
If those photos have been taken by you in higher quality, you might want to use the raw version.
I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
My Wordpress post tries to show an image with HTML code like this:
<a target="_blank" href="https://www.facebook.com/15925638948/posts/10152127553183949" hidefocus="true" style="outline: none;">
<img title="CBS Moving Forward With ‘How I Met Your Dad’" alt="" src="http://ia.media-imdb.com/images/M/MV5BMTA5MzAzNTcyNjZeQTJeQWpwZ15BbWU3MDUyMzE1MTk#._V1._SY317_.jpg" width="620" align="">
</a>
However, the image cannot be displayed. Chrome & Safari shows a white box with a small image in the middle (the case that the image cannot be displayed). Firefox shows nothing for the image part but a blank line.
If I remove this line
width="620"
the image displays.
What's the rule about this width and the actual image width? It seems working fine for most cases but not for smaller images? How do I dynamically change the width to best fit my design?
It actually works fine for me (in all browsers). My guess would be that since no height was specified, the browser was interpreting it as 0. This explains the way in which Firefox was rendering the image, but not the others. There is also the possibility that some other code (from the theme, a plugin, or elsewhere) is interfering.
Well one thing you may not know is the % function usable in HTML for many things.
for example using this code:
...
width:50%;
...
would allow the width of the child object to be 50% of that of the parent object.
I think my problem is related to this question
Image getting 403 forbidden when deployed to server
It's not about the width, sorry for the misleading.