I am using youku video in my react site. anyone please help me to hide the controls & related videos. also the autoplay is not working with the code.
code snippet:
{!defaultVideoPlayer && youkoID && (
<iframe
// src={`https://player.youku.com/embed/${youkoID}`}
src={`https://player.youku.com/embed/${youkoID}?rel=0&autoplay=${autoplay}&loop=${loop}&showinfo=0&controls=0&mute=${muted}&playlist=${youkoID}`}
frameBorder="0"
allowFullScreen
title="Yokou video"
/>
)}
Related
I bought this movie library template for Google Blogger, It uses this feature
"Big Screen Player" On every post, you have to need use below iframe player on HTML tab.
<iframe allowfullscreen="" frameborder="0" height="315" id="bigframe" src="https://www.youtube.com/embed/VIDEO-CODE" width="100%"></iframe>
but I can't use the fullscreen mode for youtube videos or google drive videos
what I'm missing?
I've try to contact the seller / developer but theres no anwser...
here it is all of his work:https://www.templatemark.com/search?&max-results=9
all templates this developer is selling have the same problem
here is the demo blogger frontend:
https://demotemplatemovie.blogspot.com/2021/07/test-post-1.html
please if you need access to the edit ask.
thank you very much
Use allow="fullscreen" inside the iframe tag. Or other tags you can use according to this answer are:
allowfullscreen
mozallowfullscreen
msallowfullscreen
oallowfullscreen
webkitallowfullscreen
Sample (You can try it somewhere else as Stack Overflow's compiler is facing issues playing it):
<iframe src="https://www.youtube.com/embed/XGk2EfbD_Ps" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
UPDATE:
Add allowfullscreen in the var c of the jquery, such that:
$(function() {
if ($("#bigframe").length > 0) {
var a = $(".single-post-title").text();
$("#titlevid").text(a);
var b = $("#bigframe").attr("src");
var c = '<iframe src="' + b + '" id="covervideo" frameborder="0" allowfullscreen></iframe>';
$(c).appendTo("#myvideo");
$("#bigframe").remove();
} else $("#myvideo").remove();
});
I have changed in theme file to display post output like below but now if am going to add any youtube URL in post text it is not showing video iframe. also, I can not use the_content() function because there is some other issue with that function.
//the_content();
$post_content .= $post->post_content;
echo $post_content;
can anyone help me to show the iframe if I add the youtube video URL in the post and display the iframe in the frontend? I know this is default WordPress functionality but it is not working.
any solution will be fine if there is a jQuery function also fine.
So, if I've understood correctly, that you can add content to a post and it shows in front end but that youtube url does not display correctly in an iframe (so it's an oembed problem) then it might make sense to think about adding the whole embed code from YouTube.
Instead of pasting https://youtu.be/TE66McLMMEw into your content area, you might paste in this instead:
<iframe width="560" height="315" src="https://www.youtube.com/embed/TE66McLMMEw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
There are ways of using JS, grabbing a YouTube url and dynamically generating an iframe for it using the YouTube Player API (as per the video, or full docs and examples here: https://developers.google.com/youtube/iframe_api_reference ) but honestly, it seems a very complex way to solve the problem. It might be better to try and find a more robust fix that lets you use the_content().
UPDATE: if you cannot use iframe directly
We can use notes from youtube API (and a great regex from this answer here: https://stackoverflow.com/a/8260383/8228720) to generate iframe on the fly. You just need to create a div with id "player" and paste the YT url inside it.
HTML
<div id="player">https://youtube-video-link-goes-here</div>
JS
//Get video url from div
let videoUrl = document.getElementById("player").textContent;
let videoId = youtube_parser(videoUrl);
var tag = document.createElement('script');
//Parse url for video id
function youtube_parser(url){
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
var match = url.match(regExp);
return (match&&match[7].length==11)? match[7] : false;
}
//Dynamically create iframe in the "player" div, adding our video id to it.
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoId,
playerVars: {
'playsinline': 1
},
});
}
I'm working on a requirement where I can record the screen and load the recorded video into the quill editor.
Right now, when I'm trying to embed the video to an iframe, I'm not seeing any src value for the embeded iframe.
But when I change the src using inspect element of the browser, video is loading in the quill editor:
Below is my code.
let range = tempEditor.getSelection(true);
tempEditor.insertEmbed(range.index, 'video', tempSrc, 'user');
Here
tempSrc value is blob:http://localhost:4100/4ab588cf-7ed7-4c08-8852-6c03895ae47a
After the above statement, I can see the iframe in the editor but not the src value.
When I try to update the source as above in the inspect browser, video is playing fine
I am using following code snippet to embed an iframe (i.e. YouTube video) inside Quill.
Make sure to have the import class at the top of your class file import Quill from 'quill';
const id = '123456' //Just a unique id
const vendorLower = 'youtube';
const editorRef = this.quillEditorRef;
const range = editorRef.getSelection();
let index = 0;
if (range !== null) {
index = range.index;
} else {
index = editorRef.container.innerText.length + 1;
}
const BlockEmbed = Quill.import('blots/block/embed');
class MediaBlot extends BlockEmbed {
static create(value) {
const node = super.create();
node.setAttribute('src', 'https://www.youtube.com/embed/XXXXXXXXX');
node.setAttribute('frameborder', '0');
node.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
node.setAttribute('allowtransparency', true);
node.setAttribute('allowfullscreen', true);
node.setAttribute('scrolling', '0');
node.setAttribute('width', '100%');
node.setAttribute('height', '315px');
return node;
}
static value(node) {
return node.dataset.id;
}
}
MediaBlot.blotName = vendorLower;
MediaBlot.tagName = 'iframe';
Quill.register(MediaBlot);
this.quillEditorRef.insertEmbed(index + 1, vendorLower, id);
Hope someone will find this useful.
Cheers!
vibin. You said:
Here tempSrc value is
blob:http://localhost:4100/4ab588cf-7ed7-4c08-8852-6c03895ae47a
Setting a value for <iframe> src is something that should be done carefully:
The tag specifies an inline frame. An inline frame is used to
embed another document within the current HTML document.
Source
So, basically, an iframe represents cutting and pasting a portion of something on your site. For copyright reasons, many companies and websites prevent content from being displayed freely. Some, however, allow this to be done but with certain measures.
For example, YouTube allows its videos to be shared and viewed on other sites using <iframe>, but using a different URL. If you have the following URL in the browser:
https://www.youtube.com/watch?v=NihM746-Msw
The embed version, placed in <iframe>, will be as follows:
https://www.youtube.com/embed/NihM746-Msw
And the <iframe> element could have the following content:
<iframe width="560" height="315" src="https://www.youtube.com/embed/NihM746-Msw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Quill video format does this process automatically when a youtube video URL (from the browser) is inserted.
But there is something to watch there. Note that this way you are using a video hosted on a website, ie on the internet. If you want to display a video from your local machine (from a file), you'll need to use the HTML <video> element, not <iframe>.
How to Embed Video using HTML5 with local file
W3Schools - Video Tag
Embeds: Video, Audio and iFrame Elements
Quill's native video format does not work with the HTML video element. Therefore, you will need to create a new format that has this desired requirement.
You can find more about creating your own format at the following links:
Cloning Medium with Parchment
Quill-Examples-and-FAQ
Awesome Quill - Modules
See also the source code of the video format.
As you can see, this is not a problem with Quill, but a matter of defining the desired settings. I hope this can solve your problem and if you need more information, please add a comment to my answer and I will edit it if necessary.
I am curious if it is possible to use this api with embedded videos that are only on Google Drive? I am trying the code below and the player is loading, but I am unable to get it to control the the iframe. Is it just not possible?
<div class="view" id="viewer">
<iframe id="player"
type="text/html"
width="640" height="390"
src="https://drive.google.com/file/d/<?= vidId ?>/preview?enablejsapi=1"
frameborder="0"></iframe>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(e) {
console.log('player ready');
}
</script>
If it is not possible with the youtube iframe api, is there anyway with javascript to start and stop videos?
Thanks.
It was a way to control the iframe player google drive but it's don't work since august 2016. Google drive embed NO iframe
Video just play without api control.
I am working with the example for clmtrackr here. I am trying to use an <iframe> as a source of video for the code (as opposed to using a tag, and doing this returns no results.
The example code :
<div id="container">
<video id="video" width="368" height="288" autoplay="" loop="">
<source src="./media/franck.ogv" type="video/ogg">
</video>
<canvas id="canvas" width="368" height="288"></canvas>
</div>
<script>
var videoInput = document.getElementById('video');
var ctracker = new clm.tracker();
ctracker.init(pModel);
ctracker.start(videoInput);
function positionLoop() {
requestAnimationFrame(positionLoop);
var positions = ctracker.getCurrentPosition();
// do something with the positions ...
// print the positions
var positionString = "";
if (positions) {
for (var p = 0;p < 10;p++) {
positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>";
}
document.getElementById('positions').innerHTML = positionString;
}
}
positionLoop();
var canvasInput = document.getElementById('canvas');
var cc = canvasInput.getContext('2d');
function drawLoop() {
requestAnimationFrame(drawLoop);
cc.clearRect(0, 0, canvasInput.width, canvasInput.height);
ctracker.draw(canvasInput);
}
drawLoop();
</script>
Has anyone attempting this yet? Any help would be much appreciated!
Thank you,
In most cases, this is not possible because of security measures built into the browser/DOM.
clmtrackr needs to access the pixels of the video file, and to do that, it needs direct access to the <video> element, which in your case is inside the iframe. In order to do that, you would need to reach into the DOM elements inside the iframe to find the video element and pass it to clmtrackr. However, it is not possible to do that unless the iframe is being served from the same domain as the outside page.
Presumably, if the iframe is coming from your own site, then you already have a way to access the source URL of the video file and can create your own element. Then you don't need the iframe. So I'm assuming you're trying to access another video hosting site, like YouTube.
Now, to be thorough, even if you could access the video element inside the iframe or if you could somehow infer the url of the video file and create your own element, clmtrackr cannot access the pixels unless that video file is, once again, coming from the same domain. This is another security measure.
The exception is if the video is served with CORS headers, as described here:
http://jbuckley.ca/2012/02/cross-origin-video/
and here:
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
Unfortunately, few video hosting services serve their videos with CORS headers.