I need to make the embedded video responsive. I tried the solution introduced here with no success. The width of video stays the same and not scales down making it look out of bounds on mobile device. How to make flickr video responsive?
Due to that fact that Chrome wasn't able to copy source code inside iframe, here is the screenshot:
<div class="flickr-embed-photo"> has an inline style with a width. Apparently it takes it from its window size, and the "window" is the iframe. And the iframe has an inline style attribute with heights and width... can you try something like
iframe {
height: auto !important;
width: 100% !important;
}
If using latest Bootstrap 4.6, you can use classes from the Embeds utility. Something like the below should work but you may need to select the proper class for your embed proportions and remove the flickr-embed-frame since flickr-embed JS could be placing inline code there.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://your-flickr-embed-url" ></iframe>
</div>
Related
I already tried using width and height 100% on it, but the issue that arises is that the frame itself takes the whole width and height, but the video keeps its aspect ratio, with a large grey frame around it. Using embeds from Vimeo and Youtube works well, but this issue arises when I use a custom CDN-based video - which is what I need.
Have you tried doing min-width: 100% on the iframe? If the page is not full size, then it might be taking up the width of that. So you could also try: body { height: 100vh; }
My first guess was to just make a CSS rule selecting the element inside the iFrame. But tt seems as you have to do it with Javascript and change the CSS of the loaded page in the iFrame. CSS is rarely able to do this on its own.
For more information see:
How to apply CSS to iframe?
I have an iframe element (specifically, a business intelligence dashboard) that needs to be embedded into a website. There is an "HTML editor" on the website's "back end" (i.e., a portion within the website that is designated for page admins).
Copying and pasting the iframe code and subsequently adjusting the height and width to properly fit the screen worked fine- but if I open the window on another screen, the iframe dimensions don't adjust for the different screen size.
Unfortunately, I don't think I have access to any CSS files in the company website (i.e., I don't think I have the ability to upload a CSS file), so I'm not too sure what I can do with most suggestions on SO. Does anyone know how I can set the iframe dimensions to be dynamic?
Web development isn't my speciality, so if I could provide better information, feel free to ask in the comments section.
Edited to add:
Following the first two responses, I inserted the HTML line
<iframe style="width:100%; height:500px;overflow:auto;">
and the iframe definitely changed sizes- but unfortunately, the grey space behind it (is that padding?) began appearing in different sizes, depending on the computer screen size. I've taken the following picture, with the red arrows pointing to grey space I'd like filled with the iframe and the blue arrows pointing to the iframe itself:
Here is the new code in the HTML editor, but with the link changed (to keep it anonymous):
<center>
<div>
<iframe style="width: 100%; height: 710px; overflow: auto;" src="https://app.powerbi.com/view?r=abc123..." frameborder="0" width="320" height="240">
</iframe>
</div>
</center>
For what it's worth, I've tried to delete the width="320" height="240" snippet at the end of the <iframe> tag, but as I click "update" in the HTML editor, the snippet reappears.
Even though you don't have direct access to the CSS, you can still change css by using inline styles.
The way you do that is by using the style="" inside the tag you want to change the CSS styles.
The way you make the width dynamic is by using the size as percentage instead of pixels.
For example:
<iframe style="border: 0; width:100%; height: 500px; overflow: auto;" src="http://www.example.com"></iframe>
Notice the width:100%;, this will cause the iframe to always be 100% of the screen size. The height will always be 500px, but you can change it to whatever you like.
You can use inline styling in the iframe element. Have a look at this link.
I set width to 100%, which means it will resize to whatever the size of the container. The height is fixed, but if it can't fit inside the container the overflow: auto; will make the scrolls show up.
<div>
<iframe style="width:100%; height:500px;overflow:auto;">
</iframe>
</div>
I'm developing a bootstrap site for which I want a video banner at the top similar to what Airbnb does. To do that, I'm using bootstrap's embed-responsive classes as shown in the code snippet below.
<div class="container-fluid" class="embed-responsive embed-responsive-16by9">
<div class="row">
<video autoplay muted loop class="embed-responsive-item" id="autovid" width="100%" >
<source src="sample.mp4" type="video/mp4">
</video>
</div>
</div>
That puts the video in my web page but now I want to stretch it across the entire screen. I thought container-fluid and setting the width to 100% would do that but its still only taking up part of the screen. It's also not responding when I shrink the window like its supposed to in Bootstrap. How do I stretch it across the entire screen and get it to be responsive to size changes?
Your primary problem is how you are implementing the width of the video object. When you give it the class attribute of embed-responsive-item you are essentially overriding the width with whatever is in the style sheet, in this case the bootstrap default styles. In any case, you should really shape your web-page via an external style sheet.
You can do this by linking to it via the <link> tag, for example.
<link rel="stylesheet" type="text/css" href="style.css">
Create a file named style.css and insert the following code.
video { width: 100%; }
Now understand that this will not always make the video fill the page. As you know your video tag is inside of a <div> tag. This will only make the video take up the full width of that container. If that container's full width is not the width of the webpage then it will obviously not take up the full width of the page.
I suggest you read more about nesting elements in html here, and the box model here.
I am having trouble keeping an <object> (a Twitch.tv Video) within a bootstrap panel. I cannot just set a "width" as this will change if the screen is resized, I would prefer to keep the content responsive just like the panels.
Also I had no luck using position either. It throws the layout off.
Here is a JSFiddle Example
Note, you have to make sure the View is stretched out to see the problem as my cols are at size of sm.
Here is an image as well showing the embed object spreading outside of the panel.
Any help appreciated!
I have also tried searching for ways to make that object to not appear widescreen, but nothing turned up.
Add this CSS property to your object. It will fit inside it's parent container:
object {
max-width: 100%;
}
Try using the Responsive Embed classes. For example:
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
The webpage is all html. No css. I don't know css. I used this tutorial to take my site designed in photoshop and make it with Dreamweaver.
I just want to simply embed a Youtube video in a specific position on the page. But the only to embed the video is to push down one of the images and put the video beside it. I want the video to be embedded on top of the page layout as if it floats there in front of the image behind it.
As you can tell, I have no idea what I'm doing.
I want the video to be on the page like this site.
Based on the code of the provided site, the video itself is running inside a div. If you don't wish to use css just define the properties directly on the style for the div which will be the container for the video as follows:
<div style="background: url(http://www.dollarshaveclub.com/skin/frontend/dsc-test/dsc-theme/images/video_placeholder.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
<iframe width="537" height="301" src="http://www.youtube.com/embed/ZUG9qYTJMsI?rel=0&autohide=1&autoplay=0" frameborder="0" allowfullscreen></iframe>
</div>
Test it on jsfiddle: Clic here
BTW: Change the background url for your background image file's location, the code for the video (gather it from youtube) and the width and height of the div accordingly to the dimensions of the video in order to customize.
Good luck!