Using K12SP and its MVC model, I would like adding embedded YouTube videos in my views. I saw that in the CKEditor, there is a widget for doing so and it adds corresponding customized HTMl tags such as :
{^widget|(name)YouTubeVideo|(VideoURL)https%3a%2f%2fwww.youtube.com%2fwatch%3fv%3diwqgcxc0r5gfTzgw%26list%3dPLKeH-azh54PWS4kozV421JGVhCd5yw9Ia|(Width)425|(Height)355|(AutoPlay)False|(widget_displayname)YouTube+video^}
However, in my view, I now need to process theis syntax to actually embed the video as for the time being, it is just showing the raw code. How can I do this? I searched for some tutorial but didn't find any.
Is there a place where front-end code for these default widgets of the rich editor is made available?
Thank you for your help
Sylvain
Why don't you use regular embed markup? E.g.
<iframe width="560" height="315" src="https://www.youtube.com/embed/GkagBXZQvOI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
HTML is the same for all the videos, you'll need to inject video URL into it.
The inline widgets are not supported in the MVC approach. You still have the toolbar buttons in the CKEditor on the Content tab - but this is because you can also have a portal engine site in the same instance. So, this means, if you want to use the inline widgets, you will need to parse the text value when getting it from Kentico, extract the Youtube URL and basically replace the widget code with the HTML markup mentioned by Roman. It may be just easier to hide the toolbar buttons for widgets for your editors and let them just to insert the URL directly.
Related
I am out after adding a video element in the template level as it is possible to add a button element like the following;
{action:button}
Is there any way of doing it like this;
{media:video}
I am building a custom template, that's why I should statically give such elements in the HTML so that user can see that there is a video element in the content (it is mandatory) and s/he will edit the source of with the desired URL.
Unfortunately video is not a valid tag.
See:: https://dev.weebly.com/create-the-html-layout-templates.html
The only real option would be to use Weebly's built-in Sections feature, which allows the user to add a video as a background (if that was your intention).
The only other options would be to have them hardcode the URL of the video, in your Theme, have them use the Video Element or point them in the direction of the App Center so they can use an app that provides the feature.
In SilverStripe I would like to embed an Instagram video in a HTMLEditorField.
I have written the following code in _config.php to allow me to add <script> tags in the editor but the editor is still not accepting the script tags.
HtmlEditorConfig::get('cms')->setOption('extended_valid_elements', 'script[language|type|src]');
HtmlEditorConfig::get('cms')->setOption('verify_html', 'false');
How do I get this working?
The most robust solution would be to create a video shortcode (or specialized Instagram video shortcode) where you just parse the ID of the video and it renders the required HTML for you out of a template.
This will look like:
[InstagramVideo id=12345]
This way you can easily update all embedded videos later.
Using shortcodable module you can make an easy to use dialog for adding the shortcode to your $Content HTML.
There is already a module for a youtube shortcode which can get you started.
How do you get rid of or replace the Microsoft Azure Media Services logo overlay (water mark) that is put onto dynamic packaged video? The following link shows the topic area:
https://azure.microsoft.com/en-us/documentation/articles/media-services-dynamic-packaging-overview/
My html contains embedded code taken from http://amsplayer.azurewebsites.net/azuremediaplayer.html
It seems that you are attempting to use the iframe embed code on the "get embed code" section of the player. Please note that this is currently under development, as it is listed on the site: "this embed code is for demo purposes only. Do not use in production."
For your player needs in production, especially if you want to use the large amounts of API's available, you should create your own player page following the instructions in the documentation and by using the samples provided.
Specifically for the question regarding the logo, there is an API available to remove to logo and can be found in the logo option section of the documentation. This is the correct way to remove to logo using the APIs provided.
It might be helpful to post some of the HTML that you are using when you say "My html contains embedded code taken from..."
It looks like the code on that page has the following div:
<div class="amp-logo" style="opacity: 0.5;"></div>
This appears to be what is placing the logo on the page you reference. Not know what HTML is actually in your page, I don't know if this is the HTML they are generating for you as embedded or whether you cut and paste the HTML from the given page.
You may be able to remove it from your HTML. If not, try creating a style that overrides the amp-logo class.
I'm trying to create a CSS documentation library in Orchard. I want to save a description, CSS snippet and HTML snippet against each content type. The first view would show the description and CSS and HTML code written out. The second view would show a preview of what the CSS and HTML look like rendered.
cssdocumentation.com/content/item1
cssdocumentation.com/content/item1/live-preview
I've created the content type and the first view. But I'm not sure how to create the second view. I can see if I can create the alternative URL I can use the Url Alternates module to create an overriding .cshtml
To create an alternative URL I've looked at the autoroute module but this only allows you to adapt a single URL (unless I'm missing something?) and I've looked at Alias UI but this forces me to manually create an alternative URL everytime I create a content item.
Is this possible in Orchard without writting too much C#? (I'm a frontend developer so I only dabble in the behind the scenes stuff)
Thanks for any help
Best solution is to do this within your own module. But as a secondary option instead of having a second page, combine this content with your first page and hide it with CSS. When the user clicks a button to navigate to the next step render the CSS/HTML result on the same page. You can do this in many ways, here are a few ideas:
Render the CSS/HTML result out straight away on the same page but hide it. Show it when the user clicks a button
using jQuery to render the result on the client side. More dynamic if you allow editing of the HTML and CSS.
Redirecting the user to the same page with specific url parameters which you can pick up in your alternate to modify the output.
I would like to be able to specify exactly where a ContentPart is rendered in a view.
For example, in my Content.Summary.cshtml I want to wrap my title and first image from the gallery (I'm using ZenGallery) in an anchor tag. I thought I would be able to do it like this but the gallery template is not rendered.
<a href="#Url.ItemDisplayUrl((IContent)Model)">
<h2>#Model.ContentItem.TitlePart.Title</h2>
#Display(Model.ContentItem.ZenGalleryPart)
</a>
But if I do the following then the gallery template (ZenGallery.Summary.cshtml) is shown along with all other parts.
#Display(Model.Content)
I understand that the recommended way to do this is probably using Placement.info, is that right? But this way makes more sense to me and would allow for more fine grain control of the end markup. How could I achieve the markup I'm looking for?
This should give you a pretty good start on doing precisely what you want: http://weblogs.asp.net/bleroy/archive/2011/07/31/so-you-don-t-want-to-use-placement-info.aspx