I run a 4chan style imageboard. When users post youtube or soundcloud links, I would like for the board to give a second link which, when clicked, would embed the video.
If I am not mistaken, 4chan uses JS to accomplish this. I have also seen many forum admins using php to do this. I know that wordpress uses php to do this.
If I went with php, I was thinking of going with something based on this:
https://www.warpconduit.net/2013/04/13/automatically-embedding-video-using-only-the-url-with-the-help-of-oembed/
For JS I am not entirely sure how to go about it. I would probably use a regex to detect youtube urls and then convert that information to an embed
You don't need RegEx, PHP or oEmbed to do this. Both sites allow iFrame embeds. So when a user gives a link just add the iframe embedding part yourself (around their link) and output that as part of the user's post.
Use String functions like indexOf to see if the link contains the word "soundcloud" or "youtube" then adjust user's given link to correct format for the iframe embedding.
Some examples:
Youtube : format = youtube.com/embed/ + User Link
User puts https://www.youtube.com/watch?v=KKE0Py64jmk so your code makes it as...
<iframe width="500" height="300"
src="https://www.youtube.com/embed/KKE0Py64jmk">
</iframe>
SoundCloud : format = w.soundcloud.com/player/?url= + User Link
User puts https://soundcloud.com/thenextmen/sofa-feat-pupajim then your code changes it to...
<iframe width="500" height="300"
src="https://w.soundcloud.com/player/?url=https://soundcloud.com/thenextmen/sofa-feat-pupajim">
</iframe>
Related
Good afternoon, I will explain the problem in details. I'm connecting the TinyMCE editor version 4.6.4 to my site. It has plugins in the Media plugin through which you can insert media files into the editor.
Thus, I add video to the editor. Actually, you can add a video in different ways, and one of them is to give the editor a direct link, and I do so.
There is a parameter media_live_embeds in the initialization of the editor, which can be inserted into the position true or false, and if the parameter is inserted into true, then, the added video can be played directly in the editor.
The problem is that if I give a link to a video from my site (vvv.mp4 example), then, it does not play (as if the parameter is inserted in media_live_embeds: false).
But if for example I add a video link from youtube (example https://www.youtube.com/watch?v=q6_yRWPd4Yc) then it works.
Here on the screen there are 2 videos, the first one with youtube link, and the second with a link from the site, the first one is played directly from the editor, and the second one is not.
What's my mistake? Who had this problem?
Here is the editor, you can test yourself.
The name of the property is media_live_embeds so this will permit to played directly in the editor embeds media. When you insert a video URL, tinyMce construct embed video code integration :
<iframe width="560" height="315" src="https://www.youtube.com/embed/LIMYj5mpMM4" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
But when you insert a video from your website without create a url access to content video or from local files, tinyMce will create a html element : <video><video>. So you couldn't play it in the editor since it wasn't and embeds media url.
We are using Instagram's oEmbed-API to get embed codes. However, we do not want to solely rely on that API and generate embed codes ourselves. The embed code as provided by the API (or the website) includes a lot of html, css image data and text content, all of that already has to be there before you can work the embed js on it. This is a problem because we cannot implement a generic embed code but have to know the instagram content for each photo or video in advance.
My question is: Ist there a generic embed code, something like this, for instagram?
<script async defer=\"defer\" src=\"//platform.instagram.com/en_US/embeds.js\"></script>
<script>instgrm.Embeds.genenerate('some instragram ID for instance')<script/>
You can use iframe to embed like this:
<iframe src="https://www.instagram.com/p/BFKjVxkBsCC/embed" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
adding /embed to instagram post URL will give you image that can be embedded
adding /embed/captioned will add caption to the image
Here is link to easily generate embed code: https://www.picodash.com/instagram/embed#https://www.instagram.com/p/BFKjVxkBsCC/
Hello I'm trying to do an chrome extension,
my main purpose is detect videos on the page, and check if user watch 80% of video, some sites using iframe for videos openload, king, vk, mail.ru etc.
The main question is, am I supposed to write a specific function for every source or can I detect videos with simple tricks?
Many of sources using sort of hashing or whatever for security reasons, I can't find an specific dom element with jquery.
example site html:
<iframe id="episode_player" src="http://hqq.tv/player/embed_player.php?vid=264230257263260272277221239235213255194271217261258&autoplay=no" scrolling="no" frameborder="0" width="100%" height="495" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
my plugin:
var iframeR = $("iframe#episode_player").contents().find("video").get(0);
console.log(iframeR);
returns undefined.
for sources who use object tag, I tried this
var zazi = $("iframe#episode_player").contents().find("object").length;
console.log(zazi);
it returns 0
any idea, which can help me to find a way?
thanks.
If I understand this correctly, you can simply use Javascript for this:
W3Schools rocks
If not, correct me!
How can I remove the watch later and share buttons from youtube iframe embed player. Using the following embed code for embedding video clips.
<iframe width="854" height="480" src="https://www.youtube.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>
Using showinfo=0 removes the full Header which also contains the Video Title.
Is it possible to only remove "Watch Later" and "Share" buttons from the header?
Using YouTube embed's privacy-enhanced mode (youtube-nocookie), it will hide "Watch later" button, but not "Share" button.
<iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>
This parameter is deprecated and will be ignored after September 25, 2018.
As an example, this is what you're trying to do:
document.getElementsByTagName('iframe')[0].contentWindow.getElementsByClassName('ytp-watch-later-button')[0].style.display = 'none';
But, short answer, there is no simple way to do this, because YouTube is on a different domain:
'Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine...'
https://stackoverflow.com/a/30545122/2488877
Though, you might find an answer suitable to your needs if you're tech-savvy in the answers to the question above.
I don't think it is possible with the iframe method.
My reasons for thinking that is:
It is not an option listed on their parameters page
I found this thread where a member of their team said it was not possible at the time (2012), and they had no plans to add the ability.
You could probably achieve something similar by turning showinfo off, and using the other methods to grab the video title.
Add this line after link
https://www.youtube.com/embed/c5cHjtspa7M?mode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent
It will disable the share and watch later option
showinfo
Note: This parameter is deprecated and will be ignored after September 25, 2018.
Supported values are 0 and 1.
Setting the parameter's value to 0 causes the player to not display information like the video title and uploader before the video starts playing.
If the player is loading a playlist, and you explicitly set the parameter value to 1, then, upon loading, the player will also display thumbnail images for the videos in the playlist.
https://developers.google.com/youtube/player_parameters
In the url params put the params : showinfo=0.
Like this : https://www.youtube.com/embed/youidvideo?autoplay=1&rel=0&showinfo=0
It will remove share and watch later button!
Use a url query string ?controls=0 to control what is shown:
<iframe
src="https://www.youtube-nocookie.com/embed/j8xbAwurfgo?controls=0&rel=0&modestbranding=1&origin=https://key.bio"
frameborder="0"
allow="encrypted-media;"
allowfullscreen>
</iframe>
YouTube Player API Reference for iframe Embeds
https://developers.google.com/youtube/iframe_api_reference
Note: this only worked for me on Chrome, not Firefox! Took me a while to figure this out because I use FF for webdev
I am using the youtube iframe api to embed newest uploaded videos from a youtube channel onto my webpage. I am successfully able to do this; however, I need to get the title of each video as well and display it within the html next to each video. So far, I cannot find a solution to do so.
This is my code to retrieve one video. I am using this method so that I can embed the videos within a carousel that I have made, with each embedded video fetching the next latest upload (a different index from the same playlist).
<iframe width="300" height="300" src="http://www.youtube.com/embed?autoplay=0&max-results=1&controls=0&showinfo=1&rel=0&listType=user_uploads&list=channelName&index=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Can anyone provide me with some tips on how to obtain the title (and possibly other information related to the video such as a date)?
All help is greatly appreciated!
Thank You!
-TT
With the new YouTube API there's no way to do this using Javscript or jQuery. However, there seems to be solutions that use PHP:
Solution Using PHP
If you're not comfortable with PHP and/or you're not uploading a lot of YouTube Videos, I would suggest either hard-coding the titles into your HTML or creating a column(s) in your database for the relevant information.