Is it possible to get player and use its api from the iframe which is already in the page?
<iframe id="dir" src="http://www.dailymotion.com/embed/video/xx9c3g?api=1" width="640" height="360" frameborder="0"></iframe>
Their docs describe how to create player, but I cant find an example how to use if iframe is already in the page:
https://developer.dailymotion.com/player/#embed-sdk-js-how-to
Thanks for the question, unfortunately, this functionality is not available and we recommend integrating with our JS SDK which provides easy access to our 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
We have a number of video references in our web app which lazy load YouTube videos as embedded iframes. We want to have the videos autoplay so a single user click will suffice to load the YouTube iframe into the page and start its playback. We've had this working as recently as a few months ago, but the autoplay is no longer occurring. I know there was an update to Google/YouTube policies in the spring of 2018 which limited autoplay; has there been a more recent change I don't know about? Otherwise, does anyone know why this might have stopped working?
I've tried the most recent iframe examples I could find online, with several variations (e.g., with and without mute=1). None of these seem to work.
Here's an example of our iframe markup:
<iframe allow="autoplay" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/sapLz6NjvJk?autoplay=1&origin=https://OurWebsiteDomain" title="Bug Week " height="278" data-ytbridge="vidSurrogate2" style="width: 100%;"></iframe>
Major browser have disabled these features due to general abuse.
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
https://blog.mozilla.org/firefox/block-autoplay/
YouTube checks upon loading whether it has permission to play how it wants to play the video. It will only autoplay if it has proper permission. The default in recent Chrome and Firefox builds is to only allow video - no sound. Adding &mute=1 the the youtube URL allows (muted) autoplay. This works if you don't necessarily need the sound, if you do then you will have to make the user click play themselves.
Applying this to the embed in your example:
<iframe allow="autoplay" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/sapLz6NjvJk?autoplay=1&mute=1&origin=https://OurWebsiteDomain" title="Bug Week " height="278" data-ytbridge="vidSurrogate2" style="width: 100%;"></iframe>
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
I am deciding whether or not I should use the full YouTube API (registering for an API key, calling the YouTube JS and building the player from scratch) or if I should just register for an YouTube account, build a playlist and load this playlist on a client's website as is (using the iframe embed code, seen below):
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/videoseries?list=XXXXXXX
&autoplay=1&rel=0&loop=1&shuffle=1" frameborder="0" allowfullscreen>
</iframe>
The embed code is easy enough, but from viewing earlier videos on YouTube Playlist settings, YouTube has removed quite a bit of functionality from basic playlist settings (autoplay, shuffling videos on play, start/stop times of each video in playlist, etc.)
I would imagine the switch for shuffle should be as easy as "&shuffle=1" or something like that. I'm not sure why YouTube makes it so difficult to comprehend new settings after having removed such a powerful feature from such a simple embed code.
Any ideas?
Here's an actual solution:
function onPlayerReady(event) {
event.target.playVideo();
setTimeout(setShuffleFunction, 1000);
}
function setShuffleFunction(){
player.setShuffle(true);
}
You have to use javascript to load the player.setShuffle(true) event, just after the first video starts (solution given here: YouTube API playlist shuffle). I didn't create it but I tried it and it worked for me too. I went two years thinking the feature was deprecated and no longer possible with embedded playlists. Seeing as this is the primary response when you google this issue, figured I'd help out.
You can find all the embed parameters YouTube supports here.
Does anyone have a solution for embedding twitter or all of its functionality into an iframe...
Basically what I want is to embed Twitter within my webapp so my clients can use it as a marketing tool while also using my application. If someone has an API solution completed that I can embed through an iframe I am willing to look at it for purchase.
If you know of a solution let me know...
<iframe src="http://twitter.com/someonespage" width="800" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
If you want more control than this, you'll probably need to use the Twitter API to build your own solution.
Here's a great blog on integrating the Twitter API directly into your web App.
<iframe src="http://m.dabr.co.uk" width="800" height="500">
<p>Your browser does not support iframes.</p>
</iframe>