Lack of responsiveness with iframe
Hello!
There seems to be a lack of responsiveness when using a Ziggeo URL inside an iframe. It's almost as if there is a fixed width and height, so if the screen size goes below either, the iframe itself shrinks but the Ziggeo video and player stay the same size, making the controls inaccessible and the video unviewable.
I've confirmed that if I use a Youtube URL for example, everything gets resized correctly.
Thanks in advanced!
-
Hi there,
Would be best to see the iframe. There are different ways to create it, and some of those could cause this.
Generally if you set a specific width / height, then that should be used all the time, regardless of the iframe size (which could make it show scrollbars).
On the other hand if you use something like width="100%" then it should be fully responsive.
0 -
Hey!
Here it is: (The "getVideoSource" basically returns a ziggeo url with a stream token)
<div class="video-presentation-player">
<iframe :src="getVideoSource"
width="100%"
frameborder="0"
scrolling='no'
allowspeakers
allowautoplay
allowfullscreen
allow="speakers *; autoplay *; fullscreen *"
class="player"/>
</div>CSS
.video-presentation-player {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.video-presentation-player .player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}0 -
Awesome. Now I do want to check what kind of URL it is. Can you tell me just how it starts?
For example:
https://video-cdn.ziggeo.com/...
https://embed-cdn.ziggeo.com/...
https://ziggeo.io/p/...
https://ziggeo.io/v/...
etc.Also since you said stream, do you mean that you are not just specifying the video token, rather also the stream token? I ask because the stream has pre-defined width and height, and if you are not setting one for the video player itself, it could cause it to show in actual stream size - which is expected not to be fluid.
So for example if your stream was 1080p, you could resize, however as soon as you were anywhere less than 1080 pixels in width, the scrollbars should show on the iframe.
0 -
Hey!
Here is the start of the URL:
https://eu-west-1.ziggeo.io/p/
Not sure I understand the difference between the video token and stream token, but after the URL we just add the token that gets returned after uploading a video to Ziggeo.
0 -
Great, thank you for that.
Now I am able to recreate it and I can see what exactly is the issue. This is going to be fixed within the r40 (it is not yet). Specifically we are setting the width to the pixel value for the size of the video which can result in the big video to show scrollbars.
To fix this though when using this URL we just need to add one very simple parameter.
For example if your token was r10123456789 your URL would look like so:
https://eu-west-1.ziggeo.io/p/r10123456789?width=100%25
The `width=100%25` part sets the width of the player to be 100% where the percentage, even though it does not really make sense to need it, has to be written as %25.
This is the URL encoded value of percentage sign.
As you modify your iframe's src attribute to include this, you should immediately see the difference. The video will also become responsive for any further changes to iframe size.
Video token vs video stream token
Now, the difference here is that you would have several streams connected to your video. So one video has one or more streams associated with it, depending on how you set things.
For example you could upload 1080p video and have 1080p, 720p and some SD formats of the same video through the use of video profiles. Likewise if you add effect profile, you would then end up with additional streams that contain your logo (for example).
If you specific just the token, then we do the handling within to grab the default stream. This is the default per your various settings. If you do set some specific stream though, you could watch that as well.
For example, check out this test video.
Default stream:
https://eu-west-1.ziggeo.io/p/r1eaf631c815ccd7865160fe5bbeba02
Default stream with width 100% suggested above:
https://eu-west-1.ziggeo.io/p/r1eaf631c815ccd7865160fe5bbeba02?width=100%25
Now, we can use the same video token: r1eaf631c815ccd7865160fe5bbeba02 yet play different streams like so:
1. original (720p)
2. default (1080p)
3. additional stream (720p)
https://eu-west-1.ziggeo.io/p/r1eaf631c815ccd7865160fe5bbeba02?stream=r1f992e68c14825bb991d13d0ee95c54
* You could still add the width parameter to each, I just left them as the stream is so it is easier to see the difference.
Hope this helps and please let us know how it goes.
0 -
Hey!
Thanks for the help so far, I really appreciate it!
That indeed made the video responsive, however, the controls bar now doesn't show up whatsoever. If I resize the screen so the iframe has around 270px wide, the controls bar starts to show very slightly, but even then it's not possible to see it correctly.
Cheers
0 -
Happy to help :)
Glad to hear it is responsive now. In terms of the controls, I would really need to check it since if I check the links above I can see control bar properly.
It is good to point out that the width will be set properly, however you will still need to have enough of the height within your iframe to make it fully shown. That is, if your iframe is less in height than your video, you could end up with a piece of video missing, or anything else that is at the bottom - like the control bar is.
Do you maybe have a predefined height that should be respected?
Since a link might help in this case, please feel free to send an email to support@ziggeo.com with the link and reference this forum post: https://support.ziggeo.com/hc/en-us/community/posts/4517764368915-Lack-of-responsiveness-with-iframe so we can check it out.
Another thing you could try is to use iframe created using this embedding type:
<ziggeoiframeplayer ziggeo-video="VIDEO_TOKEN" ziggeo-width="100%"></ziggeoiframeplayer>
* In this case the page where this is included has to have the Ziggeo Application header.
0 -
I just sent the email with all the information!
I've checked other videos, and in those I can see the controls bar. I sent the links for both the working and non-working video.
We don't have a predefined height, the iframe should always be responsive with a fluid width and height.
0 -
Awesome, thank you. I found the ticket and will follow up shortly there.
I see why it would be different, however will continue in a ticket and then once we sort it out follow up here for future reference.
0
Please sign in to leave a comment.
Comments
9 comments