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.
Related
I have a bootstrap card. One containing a video, one below that containing text. The card containing the video is written as:
<div class="card video-card">
<div class="card-body">
<video width="100%">
<source src="/request/video/SampleVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
and whilst loading, looks like this:
The problem, is that when the video loads, it increases the height of it's parent container (the boostrap card), subsequently pushing down the text card below it. This causes my layout to overflow as follows:
I assume it is doing this because it needs to maintain its aspect ratio. However, is there any way I can 'stretch' the video instead in order to ensure that it respects the width / height of the bootstrap card?
I'd rather know that the layout will be okay and make the effort to edit the videos at a matching aspect ratio.
Thanks.
HTML5 Video does not have the capability to stretch video to fit the parent container. Link to similar question.
I just realized bootstrap can help it do so. Add the img-fluid class to video as in
<div class="card video-card">
<div class="card-body">
<video class="img-fluid" width="100%">
<source src="/request/video/SampleVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
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 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>
So I am using the Typo HTML template to make a website. This template: http://nunforest.com/typo-demo/video/
I want the video to be of 80% of the landing pages' height, so that the nav bar would appear and be about 15% from the bottom of the page. Basically I want the video container to be smaller, not with a 100% height like in the template but 80%. The video should not resize its width but it should constrain the proportion and hide the overflow at the top.
The problem is that even when I edit the file the video resizes itself. Another problem is that the nav bar "catches" and fixes itself to the top of the page when you scroll over it, but because I want to change the height of the landing page, it still catches the top of the page on the spot where it was before the change of height.
Could anyone point out the parts to edit?
Thanks :)
Find and replace the following HTML in your source code.
<video class="" preload="" width="100%" height="80%" poster="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg" style="display: block;">
<source src="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4" type="video/mp4">
<source src="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm" type="video/webm">
</video>
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>