I'm trying to embed a Vimeo video and force it to use HTML5 by default.
Here's a thread about doing the same thing I'm tying to do but with YouTube.
Here's another thread talking about getting the Vimeo HTML5 cookie
Here's a discussion of the issue on Vimeo's site. Basically, I would be doing it in response to a user's preference on my site so their concerns don't really apply.
Does anyone know a workaround or way to force HTML5 Vimeo embeds even when Flash is available? (I know the cookie should work in Safari but I have many Chrome users.)
Thanks.
Currently there is no way to force HTML5 with the embed script. The "universal player" automatically chooses the format based on the device.
The old embed provides a way to force Flash, but that's the only other option.
Let's hope for the option in the future.
On a browser with flash the player loads in html5 mode with the following code. The sandbox prevents the iframe from accessing any plugins including flash.
<iframe sandbox="allow-same-origin allow-scripts allow-popups"
id="foo" width="100%" height="90%"
allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
src="http://player.vimeo.com/video/28544156?api=1">
</iframe>
To allow the vimeo button to open the vimeo web page for the video you need the 'allow-popups' permission. It's not needed to play the video.
Edit: adding complete example
If you had just a black view it's possible that the video had a size of zero because I had the iframe set to fill parent with width 100%, but if the parent was shrink to fit then that size would still be zero. Here is a whole web page with the CSS to make the video fill up most of the page. Additionally the -webkit-transform will mirror image the video, and then rotate it slightly. If it was displaying in flash this would produce a black screen as it can't handle rotations at all. I have since found out that this probably won't work on firefox at all because it doesn't natively support h.264 which is all vimeo serves, and disabling plugins will disable whatever plugin is making h.264 work on firefox.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
position: absolute;
}
iframe {
-webkit-transform: scaleX(-1) rotate(2deg);
}
</style>
</head>
<body>
<div>
<iframe sandbox="allow-same-origin allow-scripts allow-popups"
id="foo" width="100%" height="90%"
allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
src="http://player.vimeo.com/video/28544156?api=1">
</iframe>
</div>
</body>
</html>
Related
So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.
Option 1:
The source prop that I pass to the WebView is a static HTML string:
<html>
<head>
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
>
</iframe>
</body>
</html>
That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:
The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.
Option 2:
The source prop that I pass to the WebView is a SoundCloud link, for example:
source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}
That makes the video player look just right:
But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.
So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.
Solved, used this static HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
scrolling="no"
style="width: 100%; height: 100%;"
>
</iframe>
</body>
</html>
The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)
My webp images are not loading in Safari and Edge, so I want to use srcset to use the png variant instead if the browser can't load the webp file. Currently this is how I define my image:
<img
:srcset="`${require('../../assets/art/blob-right-side.webp')} ${require('../../assets/art/blob-right-side.png')}`"
:src="require('../../assets/art/blob-right-side.webp')"
class="hidden-sm-and-down"
height="500"
width="217"
style="position: absolute; top: 300vh; right: 0;"
/>
But my browser (Chrome) returns the following errors:
Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate
"/images/blob-bottom-desktop.webp?92a59c3833d65ecd5913e9d37354bcc8"
Can anyone explain to me why this isn't working? I can't find much information about it.
Possible you missed comma between values
:srcset="`${require('../../assets/art/blob-right-side.webp')}, ${require('../../assets/art/blob-right-side.png')}`"
And I don't see any rules for resolution switching
:srcset="`${require('../../assets/art/blob-right-side.webp')}, ${require('../../assets/art/blob-right-side.png')}` 1.5x"
On IE11, when there is a modal opened or a fixed element, the PDF's preview on just passed over all the content.
I tried to z-index etc but nothing seems to work, it works well on all other browsers.
Is there a solution only in CSS/HTML ?
Here's a example (only bugs on IE)
I try to check your sample code and find that you are using object tag to display the PDF which is not working in IE 11.
I suggest you to try to use Iframe to display the PDF in IE 11.
You can replace the object tag with code below may help you to solve your issue.
<div id="pdf">
<iframe src="https://www.vousnousils.fr/casden/pdf/id00264.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
I am in the process of building my own portfolio site. I am using Ruby Sinatra. I want my home page to have a full screen video background. I have googled and I found nothing in regards to my situation. I have spent hours trying to make my video play and I have ran out of hope. I am open to any possible solutions that would help make it a success. Thanks!
HTML
<video width='512' height='288' id="splashvid" autoplay loop muted>
<source src="https://www.dropbox.com/s/2vyfy2ma6xslbyk/sweeping_view.mp4" type="video/mp4">
<source src="https://www.dropbox.com/s/svw8jyfx6a2k83n/sweeping_view.ogv" type="video/ogg">
<source src="https://www.dropbox.com/s/r99qulve4g0y4kk/sweeping_view.webm" type="video/webm">
</video>
CSS
video#splashvid {
background:url('https://www.dropbox.com/s/2vyfy2ma6xslbyk/sweeping_view.mp4') no-repeat;
-webkit-background-size:cover;
overflow: hidden;
}
First of all I'm not sure if that's a good idea, but you can do it.
Same domain
So your first problem is that you trying to load your videos from dropbox.
Accordingly to my observations in Firefox and Chrome it works only if the video source comes from the same domain. (source)
To achieve this I would create a folder called video in your public folder and link them like this: <source src="/video/sweeping_view.mp4" type="video/mp4">
Fix the autoloop
Now the video should play in most modern browser.
That loop works reliable in Firefox an Chrome I added preload="none" (source)
Fullscreen
To get the video as full screen here are a few ideas. I used
video {
width: 100% !important;
height: auto !important;
}
Which works but produces not the best results. Maybe look for a js solution.
Put html on top
And now you can place your other html elements on top of it with absolut positioning like this:
h1 {
position: absolute;
top:50px;
left: 30px;
}
Result
I'm using video.js with mp4 files, it works fine in chrome, but only runs properly on every other video (even ones, not odd ones)
My code is formatted like this
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="video_1" class="video-js vjs-default-skin" controls data-setup="{}" width="580" height="317">
<source src="/path/to/file.mov" type="video/mp4">
Video tag not supported.
</video>
Making the video an absolute link does not work, self closing or normal closing of the source tag does not work, removing "Video tag not supported." does not work. The only work around I have right now is to load an empty video tag before each actual video and then hide it with css.
The videos that fail to load have a div with the same attributes as my video tag, a fluid-width-video-rapper div inside that, and a swf object, but none of the vjs divs