enable embedded youtube videos "allowfullscreen" through CSS - javascript

I am using opencart 2.3 (opensource CMS, it is an eCommerce)
I have embeded youtube videos, but after adding multiple products, I noticed that "full screen" is not enabled.
From what I read, all I need to do is add the attribute "allowfullscreen" in the HTML code to something like this
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_drgwergwwe" frameborder="0" allowfullscreen></iframe>
Now I found the javascript code that generates the attributes and I can add the "allowfullscreen" attribute to be generated as well for future products I add, but what do I do about all the products already created without said attribute?
Can I add this attribute through the use of CSS? I am able to change the iframe width, height, but what about the "allowfullscreen" attribute?
Anything would be helpful really.
Thanks :)

Related

Setting allowfullscreen attribute to a div tag

My question is pretty simple. Can I use the attribute allowfullscreen="true" to a normal <div> element to make it full-screen?
Actually, I'm building a custom YouTube Skin and I disabled the default controls using the Youtube iframe API and now, need to create new ones in place of them. But the problem is that making only the <iframe> element full screen does not allow me to place the new buttons (obviously outside of the iframe) in the fullscreen mode. So, please put some light in this matter.
P.S. - I have already tried putting the allowfullscreen="true" in the container <div> and it's working as of now. But is it the right process of doing what I have been trying to do?

Displaying the video in the TinyMCE editor

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.

Embed Youtube with Captions on by default not working

I'm trying to embed a Youtube movie, and would like Captions to be on by default.
From https://developers.google.com/youtube/player_parameters#cc_load_policy I understand I should use cc_load_policy=1.
I use the code html code below but it doesn't seem to work. That is, it loads with the captions off (you can manually turn captions on, so the video does have captions). What am I doing wrong?
I've tried the following two options:
<iframe src="https://www.youtube-nocookie.com/embed/xxxxxx?rel=0&&showinfo=0&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube-nocookie.com/embed/xxxxxx?rel=0&&showinfo=0" cc_load_policy="1" frameborder="0" allowfullscreen></iframe>
Try adding cc_lang_pref , you wouldn't find in the official docs. but it's required
cc_load_policy=1&cc_lang_pref=en
You can change pref. language as per the locale representation of the language you have put in the video caption

Embedding Instagram via JavaScript

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/

Mute youtube video that has to be embedded via HTML iframe

Problem
I'm working with a site where the developer coded an embedded youtube video to change via a script altering the iframe's src tag.
I need to mute this element, and while I'm aware that a few libraries allow me to embed a video via script with the option of muting, I'm unaware of any way to use those methods without having to rescript everything that has been done on the youtube player. What's the best option here?
element
<iframe id="tv" width="100%" height="100%" src="http://www.youtube.com/embed/9NFUgVa68hw?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>
script
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
$(".mid-bar").text("TNT");
});
The above is just one module of the script; there are 22 channels.
Again, I'm trying to mute the embedded video without having to rescript the src changes. How can this be done?
I understand you don't wish to change the src, however, if you append enablejsapi=1 you can then use javascript to mute the video by calling object.mute()
Reference: https://developers.google.com/youtube/js_api_reference#Playback_controls

Categories