I am trying to put this live video in my public access channels website. This is the embedding that they (att-uverse) sent me. The problem is that it doesn't show the controls, but has white space above the video around the size that the controls should be.
<iframe src="http://video.discovervideo.com/dvme/play/wm/?video=http://video.discovervideo.com/accounts/boltonct/pub.asx&w=320&h=240&stretch=fit&start=true" scrolling="no" frameborder="0" class="video" style="width: 320px; height: 240px">
I have tried making it a block and changing the positioning, but I can't seem to get rid of the white space. I have gotten the controls to show with the use of expanding the height.
This is the best I could manage:
<iframe src="http://video.discovervideo.com/dvme/play/wm/?video=http://video.discovervideo.com/accounts/boltonct/pub.asx&w=320&h=240&stretch=fit&start=true" width="340px" height="254px" scrolling="auto">
The white space at the top appears to be part of the video content that is being sent to you.
I had to update my Microsoft Silverlight install on my Macbook Pro to get the video to play and once it did it had the video controls at the bottom of the video as you would expect.
Related
I want to embed a non-square Youtube video as a square in my website.
Setting width="" and height="" on the iframe works to make the player square. However, the video inside the is not square: there are black bars at the top and bottom.
Is there any way to make the player 'zoom in' and play the video as square?
<iframe width="200" height="200" src="https://www.youtube.com/embed/8nt3edWLgIg?autoplay=0&playsinline=1&showinfo=0&modestbranding=1" allow="encrypted-media"></iframe>
PS: embedding doesn't seem to work in stackoverflow snippets, so here's a jsbin link:
https://jsbin.com/felosadewi/edit?html,output
I have managed to get a pure css solution to your show the video clipped to fit in a 1:1 box.
https://jsbin.com/woralocoti/edit?html,output
I have dont it by putting the video in a fixed aspect box (16:9) using padding-bottom:56%; (16/9).
And then centering that box in a 1:1 box with overflow:hidden;
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 am using the following code provided by imgur to try to give my website a full background gif.
<iframe class="imgur-embed" width="100%" height="1080" frameborder="0" src="https://i.imgur.com/eePBC12.gifv#embed"></iframe>
Here is the link to the gif: https://imgur.com/eePBC12
The issue is it creates black boxes around the top and bottom of the background.I just want a full background gif:
Incorrect background
I've tried manipulating the width/height of the image, I couldn't find anything on black boxes while using iframe that resembled my problem so I was hoping I could get help.
Use an ordinary image. .gifv files aren't real images, so you'll have to use the .gif version:
html {
background-image: https://i.imgur.com/eePBC12.gif
}
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>
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!