Using react-player, I want a full screen video on mobile. I've tried using 'playinline' on and off, 'background', 'responsive', 'padding-top' 57% etc, but I always end up with gaps at the top and/or bottom (as you can see in the image above - the white areas). Is it possible to make the video full screen using react-player with videos from vimeo (or using some other library/method/maybe a video tag)? Here is my code at present, although its not much use -
<ReactPlayer
url={`https://vimeo.com/587270643`}
playing={true}
muted
loop={true}>
</ReactPlayer>
and css (although ive tried all sorts of css, including making it fixed, using padding-top : 56.25% as per react-player docs
iframe {
position:absolute;
top:0;
left:0;
width:100%;
height: 100%;
}
cheers
david
Related
I already tried using width and height 100% on it, but the issue that arises is that the frame itself takes the whole width and height, but the video keeps its aspect ratio, with a large grey frame around it. Using embeds from Vimeo and Youtube works well, but this issue arises when I use a custom CDN-based video - which is what I need.
Have you tried doing min-width: 100% on the iframe? If the page is not full size, then it might be taking up the width of that. So you could also try: body { height: 100vh; }
My first guess was to just make a CSS rule selecting the element inside the iFrame. But tt seems as you have to do it with Javascript and change the CSS of the loaded page in the iFrame. CSS is rarely able to do this on its own.
For more information see:
How to apply CSS to iframe?
Straight forward HTML5 Audio player. Looks good on desktop but on mobile it gets a little weird. It keeps its width but repositions and floats over the element it's inside. How do I stop it from repositioning on mobile devices?
Hope you can see the yellow border for reference.
Desktop printscreen:
Mobile printscreen:
When you zoom on the mobile device, the player starts moving towards its intended position (and player controls appear) - the more you zoom, the more it moves upwards, until halting in the middle of the element:
Mobile zoomed printscreen:
Been trying all the position values and done a fair share of googling. I don't understand what causes this, so I don't know where to start trying to solve it. Hope someone can help.
HTML:
<div id="audiowrap">
<audio controls controlsList="nodownload">
Your browser does not support HTML5 Audio
</audio>
</div>
CSS:
audio { margin:0 0 0 5px; width:540px; }
#audiowrap {
margin:0 auto; border: 1px solid yellow;
}
Currently when I check this on iPhone X, it is overflowing the container with a space at the top.
Remove the width and the overlap at the bottom will disappear
https://jsfiddle.net/yqgx97p1/9/
audio {
margin: 0 0 0 5px;
background: red;
}
It's a bit difficult to debug this on a real device but if you have the cables, you can connect your device to your computer and debug/test much easier. From what I can tell, the player itself has a set height (background red) and some weird default styles that possibly could be overridden but you would need to inspect on a computer to figure it out
I faced the same issue as the HTML5 audio player on mobile and tablet was quite tall. The solution that worked in my case was simply to set .player{height=40px;}.
This solved my issue of having extremely large players on mobile devices.
<div id="audiowrap">
<audio controls controlsList="nodownload">
Your browser does not support HTML5 Audio
</audio>http://162.210.197.146:9423/
</div>`enter code here`
Blockquote
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>
First everything I am doing is on the same domain. I am lucky that I do not need to deal with origin issues. Second I have access to everything.
Currently we are playing our elearning modules - Articulate and Captivate via responsive HTML5 via wordpress.
<iframe src="https://fxxx.com/tech/2e8615a0-0782-11e5-aaac-06beb8253f3d/multiscreen.html" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>
This code works and allows us to responsively display the content in the users browsers. Note that I am iframing the Captivate file in this case and note that Captivate is iframing the actual content in the multiscreen.html. So we have a nested iframe.
I have been asked to move from the full page responsive design and add a template. The template is basic and is a 100px header on the top (ROW A), the IFRAME (ROW B COL A) and then a playbar (ROW B COL B). I can do this if I give the iframe a specific height however if I turn the iframe to width or height at 100% it turns tiny. Like 100px tiny.
I would like the iframe to be as big as possible but sit on one page for the user - and this also has implications on mobile usage. How can I force the nested iframes to fill the remaining height on the page?
Also our vendor has a tool that displays courses (on same domain) and I may have to have this page iframed in their tool - iframe to the third power. I would rather it be a css/html solution.
Note: That when I try to used fixed/absolute position and style everything at 100% it sets up right be the video is 100% of the viewport so the 100px header pushes the bottom of the video off of the page.
An excellent CSS measurement unit called,vwand vh (viewport width and viewport height) might help in your situation.
Replace:width: 100% and height: 100%
with: width: 100vw and height: 100vh
If that doesn't work, try applying 100vw/vh to <body> instead. See this ARTICLE for details. If you have problems with the other elements being displaced, try changing position: fixed to position: relative on the <iframe>( or position: absolute if you have position: relative' on`).
Btw, you may have to adjust a little to accommodate for ROW A and ROW B COL B
I want to see a screen full of embedded video but i am getting black borders on left and right but i have included allow full screen in my coding also.How to remove the borders and see stretched video? I am attaching my code and screen shot .!Screen shot of the borders<iframe id="vid" width="100%" height="100%" src="https://www.youtube.com/embed/RdIh8GiVR9I?autoplay=1&modestbranding=0&controls=0&showinfo=0&rel=0&allowfullscreen=true"></iframe></div>
The answer to this is slightly more complicated.
The "allowfullscreen" is just there for displaying the "fullscreen" button. (Although it's kind of strange)
To make it behave like you want to, have a look at this explanation
(The section with "<iframe>")
Basically, you need to put the video in a div with the full width of the website (what you probably already did) and some css magic to make it the correct height.