Embedding YouTube Videos in Silverstripe - Strips Fullscreen and Rel=0 - tinymce

I'm trying to embed YouTube videos onto my Silverstripe site, using the page editor. We're having problems with two different ways of embedding.
Editor's Insert Media:
When I click the editor's "Insert Media" button I choose "From the web" and paste in the YouTube URL. However I need to hide related videos, so to do this we need to add "&rel=0" to the end of the URL. When I do this the "Insert Media" option doesn't work.
iFrame:
So instead I tried to use the embed code provided by Google. I went to he text editor and inserted it. The iframe works, however the editor strips off the "allowfullscreen" tag from the iframe - which means users cannot watch the video in full screen.
So I either have to show related videos, which I don't want to do. Or I need to block users from being able to watch it in full screen mode - which again I don't want to do.
We're running on Silverstripe 3.3.
Is there any way to stop Silverstripe from stripping the allowfullscreen tag? Or to have Silverstripe still process the YouTube URL if we put rel=0 on the end?
Alternatively, does anyone know if this has this been solved in 3.4, 3.5 or 3.6?
Before posting this I have done over 45 mins of thorough searching for an answer, including through Silverstripe forums (which are now discontinued), here on Stackoverflow and the Google group. Plus I worked my way through a number of the change logs of 3.4, 3.5 and 3.6 for anything related to iframes and YouTube, but was not able to find things specific to this problem.
The TinyMCE editor in a different CMS I use does not strip out the allowfullscreen tag from iframes. So it seems specific to Silverstripe's implementation of the editor.

Direct answer to your question would be to amend the tinymce config to include more attributes for the frame by setting the "extended_valid_elements"
https://docs.silverstripe.org/en/3/developer_guides/forms/field_types/htmleditorfield/#setting-options
Alternative way would be to introduce new shortcode : https://docs.silverstripe.org/en/3/developer_guides/extending/shortcodes/
Latter would be more user safe to some extend.

Related

TinyMCE doesn't work on all similar pages

I have the TinyMCE sample with API key installed on a test page at https://myezwb.com/tinymce.htm - there is no other code on the page and the TinyMCE works great.
Now I have installed that same at the top of 3 production pages at https://myezwb.com, just like I did on the test page.
It works on one page that has a single textarea but on similar pages with one or multiple textareas it won't work, with or without an API key.
I don't find any differences between the code or structure on the three pages and/or the test page.
What am I missing?
Thanks in advance.
The error:
tinymce.min.js:2 Failed to initialize the editor as the document is not in standards mode.
TinyMCE requires standards mode
explains the issue. TinyMCE 5 requires the page in which it is loaded to be in Standards mode and not Quirks mode.
For more on this topic you can find lots of details online such as:
https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
https://www.quirksmode.org/css/quirksmode.html
What is quirks mode?

Can I embed source files from GitHub on my web page other than Gists?

Context
You can create a Gist on GitHub and embed it on your web page: embedding Gists.
This is an example of a randomly chosen Gist: tap.groovy.
Question
Is embedding also possible with other code files from GitHub, for example with this randomly chosen C# file ICommand.cs which is not a Gist?
You can try https://emgithub.com, which does exactly what you want.
To embed the example file ICommand.cs in your question, you can just add "em" before "github.com" in the address bar, then press Enter.
Then you can get a script tag like this:
<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fdotnet%2Fcorefx%2Fblob%2Fmaster%2Fsrc%2FSystem.ObjectModel%2Fsrc%2FSystem%2FWindows%2FInput%2FICommand.cs&style=default&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
Note if you simply click Run code snippet in StackOverflow, the copying button at top right corner may not work. Running it outside SO would work fine.
Unlike other websites that do similar work, EmGithub.com is a static site hosted on Github Pages. Fetching target files and highlighting are done on your browser.
Disclosure: I'm the developer of it :)
You can use https://gist-it.appspot.com/:
<script src="http://gist-it.appspot.com/https://github.com/dotnet/corefx/blob/master/src/System.ObjectModel/src/System/Windows/Input/ICommand.cs"></script>
There's a standard for embedding content from one website in another via a URL, called oEmbed. Unfortunately, GitHub is not a oEmbed provider, i.e. it doesn't support oEmbed for its URLs.
I found a proxy service, Oembed Proxy for GitHub,
which adds oEmbed support for GitHub's code URLs. You pass a GitHub URL as a parameter to the proxy's URL and a resulting URL can be be pasted in another website, assuming that website supports embedding oEmbed links.
Another obstacle is that not every website supports embedding oEmbed URLs. According to the proxy's documentation, notion is one website that supports them. I did some research and looks like it should be possible to add oEmbed support to e.g. wordpress or jekyll.
This answer provides a very limited solution, due to small adoption of oEmbed. I thought it would be worth to spread the word nonetheless.
Another possible service is https://github.com/finom/github-embed. It seems to be unmainted by now for about 2 years, but gist-it seems to be unmaintained for even 6 years. I've tried neither, though.
You can use gistYard
<iframe src="https://gistyard.piyushdev.xyz/emd.html?lang=&from=0&to=&code=https://raw.githubusercontent.com/dotnet/corefx/master/src/System.ObjectModel/src/System/Windows/Input/ICommand.cs&edit=true&dm=off" width="100%" height="330" frameborder="0"></iframe>
It provides features like changing theme , cutting code directly from raw , edit mode , custom styling and others.

Plugin for adding content to blog post

I'm implementing a blog in my website and i'm looking for a plugin that will allow the users to style their posts. Like the bar here in stack overflow that lets me add images, links and such...
I'm not looking to integrate wordpress. I already have the blog engine implemented, and I'm just looking for this kind of plugin.
Anyone know about one?
Many thanks!
Uri
What you're looking for is a WYSIWYG editor that is embedable in your backend.
WYSIWYG is an acronym for "What You See Is What You Get". In computing, a WYSIWYG editor is a system in which content (text and graphics) displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product, which might be a printed document, web page, or slide presentation.
This way you can adapt a textarea to make it something like the editor you have on SO.
Try googling "embedable WYSIWYG editor": http://tinyurl.com/nd3to4c
You'll find tons of javascript plugins that give you these features.

iPhone Stylesheet or JS

I downloaded a template and customised it a bit. It's working well but the template has a kind of mobile style sheet. When I open the webpage with the iPhone, it looks great on the homepage. However, on the most important pages I don't want it to appear for mobile I want it to appear like it would on a browser.
I've tried.
Deleting the: style-mobile.css file. - Nothing happened.
Playing around with the style-mobile.css file. - Nothing!
Deleting some js files.
I can't seem to find the code that is telling my iPhone to open the page like an iPhone instead of opening it like a browser.
Where will I find this??
The idea that you can download an arbitrary HTML/CSS/JS(?) template that is designed for mobiles and have it magically adapt to look right in a classic browser window is .... naive.
Either look for a template that is designed to look good in both contexts, or build your own layouts using something like Twitter Bootstrap which is responsive to differences in the display port size.

joomla tinymce editor problem

hi i am using joomla 1.5 for my site.
in this i fetched the problem of tinymce editor when i clicked on any article the image button are not shown. when i clicked on edit html source button It showing only “{$lang_theme_code_title}” on the Title bar and all body is blank.
so plz help me to resolved out from this problem.
thanks in advance
You should consider trying the JCE editor instead of trying to debug Tinymce. I'm running JCE error free on over 40 sites. It has a superior image manager, link manager, and code view. It installs easily and is highly configurable. The only caveat is that you should disable the Joomla insert image, page break, and read more buttons as JCE has those built in.
http://extensions.joomla.org/extensions/edition/editors/88
See this thread:
http://forum.joomla.org/viewtopic.php?t=62545
Try adding www. to your domain. Most often this is the problem.
I searched joomla project for vars $lang_theme_code_title... and related... There are not. Looked at Tinymce editor, it has javascript driven language file...
Most likely problem is cause by JavaScript. Try using different browser (firefox or chrome).
I read info on some other forums, some claim that temporarily disabling the antivirus solved the problem. I don't think that this will work, but you can try.
If none of this helps, you will need to give more information. Load firefox with firebug and see the NET tab for JavaScript files and Ajax Requests, most likely you'll find something interesting there (i think 500 Error)