Forum Discussion
Responsive Embed Code not working properly
Hi Tiger Boshomane - what browser/OS combo are you seeing this on? It might be an unintential issue and would be glad to help you solve this. Can you also paste the iframe code you are using?
The below code is copied directly from Stream
"<div style='max-width: 640px'><div style='position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;'><iframe width="640" height="360" src="https://web.microsoftstream.com/embed/video/2cded409-af9e-409a-ba17-e9a7096a4580?autoplay=false&showinfo=true" frameborder="0" allowfullscreen style='position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; max-width: 100%;'></iframe></div></div>"
I actually noticed that there's an overlaping image which could be the cause of the scroll bars, i've attached a screen shot below, I think this image is replaced by the actual responsive video when a user clicks play.
Overlapping Image causing the scroll bars
- Marc Mroz
Microsoft
Tiger Boshomane - I tried to reproduce this issue internally here at Microsoft but wasn't able to make it look like you have.
A few observations. It looks like the scroll bars up/down and left/right are not inside the iFrame. From yourscreenshot it makes me think they are in your HTML code around the Stream iFrame.
Also it looks like for some reason the Stream embed iframe didn't render quite right. There is a black circle centered with a triangle to the right of it. I believe that white triangle is supposed to be inside of the black circle for our play icon button. Do you have any idea if there is some other code / css on the page that is messing up the rendering of the Stream embed?
Can you check this issue on other OS/Browsers and see if has the same problem there?
What OS/Browser is your screenshot from?
The worst that I could get to happen in my testing was that there was just a vertical scroll bar at some very specific narrow widths for Stream when the title of the video was long (wraps to 2 or more lines). However the scroll bar went away again if I made the player even narrower. But I don't think the scroll bars you are seeing are not from the player, because of the white space between the player and the scroll bar in your picture.
- We use windows 10 and IE Version 11.1480.14393.0. I tried recreating it today but once i place the video on the page it asks me to sign in and that process doesn't work, but that's another topic all together
Tiger Boshomane - what browser/OS is this? Is it IE11 on Windows 7? Are you noticing the same issues on an alternative browser?
- Hi there, sorry for the late reply. It's been hectic. Anyways, We use windows 10 and IE Version 11.1480.14393.0
