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>
Related
I'm trying to pass the last few items on the FCC test suite before I submit my responsive project and I have two that I'm getting errors on when I should not- I understand test suites much better than before, but can't figure these two out.
I can watch an embedded product video with id="video".
AssertionError: #video should be an or element
The #video element IS a video so I'm not sure why this is still catching.
<video id="video" autoplay loop src="http://res.cloudinary.com/mpauldesigns/video/upload/v1532013100/photo_collage.mp4" type="video/mp4">
<p>Your browser doesn't support mp4 video</p>
</video>
The navbar should always be at the top of the viewport.
AssertionError: #header or one of its children should be at the top of the viewport even after scrolling: expected 299.9624938964844 to be close to 0 +/- 15
I made sure the navbar is a child of the header, is sticky, and right near the top so I don't know where it's pulling 300 from!
Here's my project:
https://codepen.io/mpauldesigns/pen/LrqBOQ
What am I missing? Thanks for the assist.
you can use video
<iframe id="video" src="https://www.youtube.com/embed/RDNw8KC0j_M" frameborder="0"></iframe>
and secound thing
In the header, you can add a position at fixed
#header{
position:fixed;
top:0px;}
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 have to show an exterior page in the iframe. The iframe's width is relatively small (about 400px) and cannot be changed. The problem is that when I scroll the iframe horizontally I can see the background of the contained page is not drawn. But some pages are rendered normally.
The code to reproduce is very simple:
<iframe src="http://ubuntu.com"></iframe>
<iframe src="http://britannica.com"></iframe>
<iframe src="http://linktiger.com"></iframe>
<iframe src="http://youtown.com"></iframe>
<iframe src="http://pagefreezer.com"></iframe> <!-- ok -->
<iframe src="http://imdb.com"></iframe> <!-- ok -->
A picture is worth a thousand words: http://jsfiddle.net/rKfNA/3/
The background of these pages is specified using the ordinary background css property.
I've reproduced this in the all major browsers under ubuntu, android and windows.
Why the iframe is not showing them right? Is this a rendering engines' bug? Or is this 'by design'?
And what can I do to show content in the iframes right?
Could you help please?
The background is set on the body. The body is the height en width of the iframe.
It is a bug made by the developers of the site. You can put an iframe in a div. The iframe exactly needs to be the width and height of the site you are showing. There is no other way.
Example: http://jsfiddle.net/rKfNA/4/ (the widths and heights of the iframes are not the width and height of the site inside it, so there are double scrollbars)
I'm a beginner to HTML and need some help... This thing has been driving me crazy-I want to embed a HTML snippet in my site so that a video plays once without showing the controls... I also wanted it to work on many browsers, and after 2 days of research I achieved the code below (woo-hoo!). The only trouble is that when I put the code in the the snippet in the program, I cannot control its position (I want to put a small image above it and can't get the video behind it...)
Please help me! Can the code be fixed or do you know alternatives? (I don't want to modify the header section or install scripts)
<video wdith="600" height="300" autoplay>
<source src="https://sites.google.com/site/privateforsharingfilesbytt/home/docs/Eng.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
screenshot
Thanks!
Here's a quick example to overlay an img on a video:
<div>
<img id="overlay_img" src="http://i.imgur.com/i5Gp6.png" width="150" height="150" />
<video width="560" height="340" controls>
<source src="http://media.html5media.info/video.mp4" type='video/mp4' />
</video>
</div>
JSFiddle Demo
The idea is to place an image using an img tag. Then, I gave the image an id to I can adjust it's positioning in CSS. To have the image actually overlay on top of the video, I did position: absolute which allows me to set the position of the element relative to its' ancestor.
If you would like to move around the image, you will need to specify top, left, bottom, right positioning values.