I have searched high and low and am unable to find a solution. It appears to me that the iframe API only works on older style URLs and not the newer customs ones.
What I mean is if a person has a YouTube URL of www.youtube.com/user/THEIR_NAME the iframe API works perfectly. However if they have www.youtube.com/c/THEIR_NAME the iframe API doesn't work.
Specifically I should say that individual video's work fine across all types - mostly because an individual video you add in the ID type for the specific video.
Examples of what I mean, if you add this (note I'll use a well known YouTuber with the older style URL). This works perfectly, the code is designed to find and display the latest uploaded video by the user using the listType=user_uploads and the list-USERNAME
<iframe id="ytplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/embed?autoplay=0&showinfo=0&rel=0&listType=user_uploads&list=pewdiepie" frameborder="0"/>
The above work exactly as I hoped. Now when I try it on a user that has the newer vanity URL of youtube.com/c/USERNAME I get a black screen in place of the video and on pressing the play button it says "An error occurred please try again later". This happens regardless of who I put in the list= field. If they have the new style /c/USERNAME address the video won't show up. Individual videos will show up from that user if listed though.
Example, same code as above but with a user that has the newer /c/USERNAME URL.
<iframe id="ytplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/embed?autoplay=0&showinfo=0&rel=0&listType=user_uploads&list=poziix" frameborder="0"/>
From the same user if I did the following code (below) it displays the video perfectly and as expected, again because it's using the video ID instead of the user channel name.
<iframe id="ytplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/HMP35vpPn6w?autoplay=0&showinfo=0&rel=0" frameborder="0"/>
I have tried this with a number of users that have the newer vanity URL of /c/USERNAME. I have also tried to use the actual name instead of the vanity for example I tried replacing "poziix" with "UCU0E_r2fyLxDQhhdLYcJrNA" the actual name and again no luck. I have also tried the name and actual name of another user with the /c/USERNAME with no luck.
Can someone advise on how I can go about fixing this? I am making a web site that is to display the latest uploaded video as it changes, and to date I've running into a brick wall.
Thank you kindly in advance.
Was having this exact same issue with the exact same use scenario.
Here's what I found... Go to the user's channel, all uploads, and then take the section of the url after '/channel/' which from what I can tell always starts with 'UC' on the newer channels. Use this, and change the first two letters from 'UC' to 'UU'
https://www.youtube.com/embed/videoseries?list=[UU.....]
I can't find any mention of videoserieson the iFrame Player API.
Related
New Squarespace, Vimeo, and iFrame user here. I'm doing some work for a non-profit, and they've asked me to create a "Testimonials" page with ~10 videos where the controls of each are revealed only on hover.
On load / inactive state
When the video loads, there shouldn't be any controls; sharing; or title/byline visible.
On hover
On hover, the user should see the player controls.
What I've tried
Given the basic iFrame embed code:
<iframe src="https://player.vimeo.com/video/58659769" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
✅?title=0&byline=0&portrait=0 gets rid of the title, owner name, and owner avatar of Vimeo accounts, regardless of paid status. This is a step in the right direction!
🛑?controls=0 gets rid of all controls for Pro+ videos, which is the desired start state. However, the only way to then play the videos is via autoplay=1: https://developer.vimeo.com/player/sdk/embed. This wouldn't work with multiple videos on the page. Also, we don't have a paid Vimeo account.
🛑Targeting the elements with a { display: none; } works when in my Dev Tools Panel after page load. However, I can't produce the same effect via the Custom CSS panel -- I suspect due to Vimeo server-side restrictions. (It hides the elements at first, then renders them after ~3 seconds.)
🛑I can't inject custom Javascript into the site via Developer Mode because we're only using the basic Squarespace, so all JS solutions are currently blocked. However, I may be able to get them to pay to upgrade Squarespace, so JS solutions are welcome!
🛑Injecting <script> tags into the embed modal doesn't execute the code
I know this would be possible from the Vimeo development side because the desired event happens when I've started to play the video. After pausing a video that has been playing, the controls disappear, and then reappear on mouse movement over the video.
The closest thing I could find was using Frogaloop (https://forum.webflow.com/t/play-vimeo-video-on-hover-from-a-cms-collection/78458). However, given JavaScript restrictions, I don't know how to execute something similar in Squarespace.
Credit
The video stills are just for testing, given that I know that it is uploaded to a user with a Vimeo Plus account. Thanks to Bianca Giaever! https://vimeo.com/58659769
I was able to connect with the folks on the #VimeoStaff Twitter account, who provided me with the following answer. TL;DR: what I'm attempting to do isn't possible, but there are some (suboptimal) workarounds.
As you've found, you can control settings individually (such as the
title and byline) within the Embed tab of your video settings page.
I'm afraid it's not possible to change anything mid-load in JS,
meaning you won't be able to load the player with no controls and then
activate them with a hover. We're so sorry for any inconvenience! I'll
be sure to extend this feedback to our product team.
It is possible to remove the playbar from your embedded videos. You
can enable this feature by adding the ?background=1 parameter to the
end of the player URL in your embed code, for example:
<iframe src="https://player.vimeo.com/video/76979871?background=1"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>
Adding this parameter will have the following effect:
All player toggles and elements will be turned off (including the play/pause button!)
The video will automatically loop.
The video will be set to autoplay
The video will be muted
If you would simply like to hide the UI of the player without
muting/autoplaying/looping (i.e for a chromeless player), you can
alternatively add the controls=0 to the end of the player URL in your
embed code, for example:
<iframe src="https://player.vimeo.com/video/76979871?controls=0"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>
When using the controls embed parameter, you'll need to either enable
autoplay (?autoplay=1), use keyboard shortcuts, or implement our
player SDK to start and control playback.
More information on background and chromeless videos can be found
here. Please note that keyboard shortcuts cannot be disabled
currently.
Additionally, I can see you've mentioned having multiple videos on one
page. If you have more than one video autoplaying on a particular
page, you will also need to include this parameter: autopause=0
I am using iframe tag as below on my structure and template with webcontent, our business requirement is if video is not available on given link show alter image instead, I thought it should be easy and but after googling on it did not see any better way so thought let me ask here... any idea ?
here is my code looks like
<iframe src="${.vars['Embed_Link'].getData()}" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Btw this is Liferay 6.2 EE
there is no alt image in an iframe. An iframe just shows whatever it finds under the URL that you provide to it, indiscriminately.
To mimic something like this: If the website (with the video) that you embed is under your control, you can determine what to show in case no video is available. Currently it might show a 404 error message, a search for related content, an ad, nothing at all.
Another way to mimic is: Find out if the server delivers 404 if a video is not available, then determine (using an Ajax-request) if you'll get 404 or 200 as response code. And only if you get 200, render the iframe, otherwise render your alternative image.
In general, this is quite unrelated to Liferay, and with this hints you might find some code in the regular web development circles
The past week, Facebook has been getting every article feature image wrong on my site. The og:image is clearly defined, worked fine for the past few months and even the debugger shows the correct image, yet it chooses to use the same incorrect image across all new articles now.
Article
http://www.highwaysindustry.com/causeway-creating-a-competitive-edge/
Facebook Debugger:
https://developers.facebook.com/tools/debug/og/object/
URL: http://www.highwaysindustry.com/causeway-creating-a-competitive-edge/
The meta tag, which clearly provides/defines the correct image Facebook should be using:
<meta property="og:image" content="http://www.highwaysindustry.com/wp-content/uploads/2015/05/Causeway-image-1.jpg" />
When on the debugger, if you Fetch New Scrape Information it will fix the issue. However I am currently having to do this on every single article that is posted. Why it's getting the wrong image in the first place I don't know.
In case someone runs the 'fetch new scrape information', here it is at the moment for that URL provided:
https://www.dropbox.com/s/8t4o9h3o1p9uxhv/debugger-fb.png?dl=0
I am using WordPress and Yoast SEO.
There's a warning. And it's going to take some time to update the latest information but for now you might have to fetch new scrape information yourself.
og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://www.highwaysindustry.com/wp-content/uploads/2015/02/Dorman00001-e1423681471392.jpg' will be used instead.
I had a video that stopped being controllable when I appended a safety feature: I added
"&origin=http://mydomain.com" to the attributes of the iframe that had the video. (By not controllable I mean that the youtube api stopped working). So I decided to use the "sandbox" feature, which is also for security.
Unfortunately, it works too well - it blocks content too.
So if all I want to do is prevent the iframe from causing mischief, but I also want to play third party videos, should I use:
sandbox=""
or
sandbox="allow-same-origin"
I don't quite understand it from the W3schools description.
Thanks,
You should be able to set the origin= parameter on the URL that you include as the src= for your iframe tag.
One thing to try is URL escaping the :// characters in the parameter's value, e.g. origin=http%3A%2F%2F//mydomain.com. Does that help? If so, we'll get the example updated to reflect the need to escape.
If that doesn't help, could you please provide the full iframe tag, including all the attributes and their values, that you're using?
origin only works on html pages, not on asp.net pages. I tested it.
I just noticed that some of webpages can not be viewable through frames. I have to display this website (https://mebbis.meb.gov.tr/login1.aspx) but I just don't know where to start . In addition to this, I tried couple of more websites like google, facebook, yahoo, etc... But non of them seem to be displayable through iframes either. I am not really interested in google yahoo facebook. However I have to get this website working. Does anyone out there know a workaround to fix this? Thank you
<iframe runat="server" id="mainFrame" name="main" width="100%" src="https://mebbis.meb.gov.tr/login1.aspx" style="height: 600px;">Your browser doesn't support frames.</iframe>
P.s. I am working with asp.net so any suggestion with that will be appreciated.
Why I need this : I designed a website that can take pictures of a frame so that our users can login to mebbis.gov.tr to prove that they are currently students so that they can ride the buses with reduced price. We'v been working this over a month and we are quite stuck at this point.
I have seen this recently myself within e-learning courseware, as courseware is typically loaded within an iframe.
Some websites add a setting so that they cannot be visable within an iframe. The setting is a header called "x-frame-options"
An example of this is facebook, which passes back:
x-frame-options DENY
This can be viewed in firebug under the net panel.
More details about the header are here:
https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header
EDIT
I've noticed that the link you sent doesn't have the header. Because the website is actually returning an error, it looks like it's detecting that you are loading it though an iframe in the onload javascript event and redirecting you to an error page.
if (self != top) self.location='http://mebbis.meb.gov.tr/hatali.jpg'
If a website is specifically trying to stop loading through an iframe, you probably shouldn't do so.