I'm looking for an example by which I can understand how to can I open a youtube video in lightbox2 in drupal.
Any type of help is appreciated.
Thanks
You can do it easily with these modules (for Druplal 7)
Media
Media Video Embed
Colorbox
Embedded Media Field
Media Colorbox
Maybe some more, such as requirements, but with those modules you can get the job done. You must install all of these module. The colorbox module needs the jquery.colorbox-min.js plugin.
What you do is this:
enable "colorbox load" of the colorbox config
create a new field for your content-type with an "embedded video" field
in the display setting for the field, choose "thumbnail with colorbox" of something to that effect
if it's not working then your missing a module or js plugin, or something is ill-configed, or you need to wait for the Media Internet field to fetch the thumbnail
Oh, here's an example: http://sunumusic.com/videos
You can achieve this by using the rel attribute.
<a href='http://path/to/your/youtube/vid' rel='lightframe'><img src='/path/to/video/thumbnail.jpg' /></a>
Related
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.
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.
I was wondering if someone had already tried to make his own simple DASH player(and maybe has some examples/source codes) but without using dash.js repository on GITHUB , and if possible has any insights and tips on how to start with the creation/writing process?
Take a look at Building a simple MPEG-DASH streaming player:
Like described on this site following this steps should give you an idea:
Define an HTML5 video element in the HTML section of a page.
Create a MediaSource object in JavaScript.
Create a virtual URL using createObjectURL with the MediaSource object as the source.
Assign the virtual URL to the video element's src property.
Create a SourceBuffer using addSourceBuffer, with the mime type of the video you're adding.
Get the video initialization segment from the media file online and add it to the SourceBuffer with appendBuffer.
Get the segments of video data from the media file, append them to the SourceBuffer with appendBuffer.
Call the play method on the video element.
Repeat step 7 until done.
Clean up.
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.