I have a simple iframe which is used to display a vimeo video on my site, as so:
<div class="video">
<iframe src="//player.vimeo.com/video/88893424" width="960px" height="540px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And it works like a charm on all standard computer browsers. Ajax is used throughout the site, and transitioning between pages that have videos and don't work exactly as you would expect - Ajax grabs the new page content, slides it on, deletes the old content, and the video works perfectly.
However, on iOS Safari, the video does NOT load. The space for the video is reserved - the other content on the page flows around the area where the video should be, which tells me the div is loading, and the height and width information of the iframe element is being registered by the browser. But no video, nothing. Reload the new page, though, and the video is there and plays just fine.
So my question is: Why is the reload required? What could I be doing wrong that is causing the AJAX to fail? I have read several answers across SO that seem to incriminate header information and cross-site drama, but it is danced around and not explained. Can anyone give me a clear understanding of what's going on here?
Related
I am creating a single page website on squarespace and I added a background video using Iframe and grabbing src from vimeo. I have researched and learned that safari does't play videos if they are not muted, so I attempted to mute and added other suggestions like inline but still the video won't play. I have also noticed though that on my friends Iphone 10 it worked, and on someone else's Iphone 10 it didn't? I made sure both had low power mode off so I am not sure if it's my code or if it could be possible settings differences they both have? Here is the Iframe code. Also here is the squarespace website, password is david. (if you open this on mobile ignore the big font I haven't adjusted size on that yet). Any potential leads or tips would greatly help! I have been going in circles all weekend trying to get to the bottom of this.
<iframe id="v0" src="https://player.vimeo.com/video/318621793?background=1&autoplay=1&loop=1&byline=0&title=0&playsinline=0&muted=1" frameborder="0" webkitallowfullscreen playsinline autoplay mozallowfullscreen allowfullscreen muted >
</iframe>
You may need to include most Video.type like mp4, MPEG-4,etc..
For all platform
I have a rather strange issue with my jPlayer. I have been using this player for about 2 years now, and it's worked great iframed from my server into a web page elsewhere. Recently I did move the players from GoDaddyto my hosted WHM server. I at least thought they worked properly after but now when you open a page with it the music names n title scrolls fine but no music.
But if you hit the pop out box upper right, a new pop out box appears, and it plays fine and no longer had the little square for the pop out. As an experiment I copied the pop out link back into the iframe and ended up the pop out link box wasn't there and still no music. I tried re-copying the entire player directory again from GoDaddy and had the same experience. Was there maybe a change with Chrome and iframe security?
If I put the link in the original iframe directly into the address bar in Chrome it works fine, as does the url that accompanies the pop out.
I'm a baby at best when it comes to this but often I don't hear from my developer for some time and I am trying to learn.
<IFRAME src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0"></iframe>
I can get to the various codes but this is the start. There are many players back ended into the same player vix XML file but none of that has changed. This also works fine in IE and Firefox.
It doesn't function in the Snippet because of strict security but it works in this `PLUNKER. I'm not sure what you are asking...
<iframe src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0" allowfullscreen></iframe>
The title pretty much sums my question up. I've given a cursory glance to https://developers.google.com/youtube/iframe_api_reference and have searched online but all I have found are explanations on how to get an embedded video to autoplay (the first video only) while preventing the suggested videos list at the end. I think that perhaps the logic for playing suggested videos is only supported on youtube.com itself, a conclusion that might be supported by the autoplay button being outside of the video element.
As a worst case solution, I thought maybe if I could save a youtube.com page to my desktop I could modify the styling to only show the video. But alas, the page breaks when I try to load it from my hard drive as opposed to the website.
Edit: Take note that I'm talking about two different types of autoplay here. One is the autoplaying of suggested videos as seen in the picture, and that is the type of autoplay I want to be able to use in an embedded player. The other type of autoplay that I don't need help with is getting the embedded player to automatically play the video that is contained in its iframe src, aka the first video.
Since you marked iframe under your tags and I can't comment, I will try to answer.
If you're using iframe then make sure
autoplay=1"
is on
<iframe id="ytplayer" type="text/html" width="720" height="405"src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1"frameborder="0" allowfullscreen>
I found a link that will build it for you. It was a bit into the api link you gave.
https://developers.google.com/youtube/youtube_player_demo
You can give it the video and tell it what you want it to do.
I am trying to add a YouTube embed link on to a web page I did not originally develop (and therefore not that familiar with it) with lots of different things already going on with it (i.e. many other js calls, etc) - so in other words for a novice JavaScript debugger like me it is pretty tricky to identify things.
For some reason, the page changes any YouTube embed link to a near full screen width video. I want it to simply run as per the code I am pasting in, which for this example is:
<iframe src="//www.youtube.com/embed/tGvHNNOLnCk?rel=0" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
I can see the code it swaps it out with is:
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe src="//www.youtube.com/embed/tGvHNNOLnCk?rel=0" allowfullscreen="" frameborder="0" id="fitvid802730"></iframe></div>
When I turn JavaScript off, the embedded video displays at the right size, and uses the original code - so it's clear to me it has something to do with JavaScript.
Bearing in mind I am new to JavaScript debugging, What is the easiest way to somehow cleanly disrupt any operations on this kind of code so there are no manipulations done to the youtube embed code?
I am using Google Chrome dev tools.
I created a slideshow for a website and users can put videos from vimeo or youtube in it. It works just fine. Due to some limitations with current browsers I have the thumbnail of the video showing in the slideshow, and clicking the picture opens a lightbox with the actual video. I copied the iframe code from both the youtube and vimeo websites exactly as they have it, but my console is showing errors for every iframe on the page. This is an example iframe element on my page:
<iframe
class="hide_me"
src="http://player.vimeo.com/video/7339803"
width="100%"
height="100%"
frameborder="0"
webkitallowfullscreen=""
mozallowfullscreen=""
allowfullscreen="">
</iframe>
And this is the error I'm getting in my console:
Blocked a frame with origin "http://player.vimeo.com" from accessing a frame with origin "http://my-machine-name". Protocols, domains, and ports must match.
Am I doing something wrong?
Pages can prevent themselves being loaded inside iframes on third party sites (same origin policy).
The whole rundown can be found here: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Pages that allow embedding in general often have a specific URL without these restrictions, but even YouTube has added them to their current embed URL recently with the old /embed/ scheme still working. Maybe Vimeo also has a working alternative?