I wish to embed an html map within a JustPy generated web page. I get mangled output which I guess means there's a CSS or other clash. Any ideas to get this working will be gratefully received.
import justpy as jp
def map_page(request):
wp = jp.WebPage()
jp.Div(text='iFrame with map goes here...', a=wp)
m = jp.Div(a=wp)
m.inner_html = '<iframe src = "map.html"></iframe>'
return wp
jp.justpy(map_page)
wp = jp.WebPage()
see http://ceur-ws-browser.bitplan.com/volume/400 for a working example:
http://ceur-ws.org/Vol-400/ is embedded:
headerHtml=f"""{links}<h3>{volume.h1}</h3>
<a href='{volume.url}'>{volume.acronym}<a>
{volume.title}<br>
{volume.desc}
published: {volume.pubDate}
submitted By: {volume.submittedBy}"""
iframeHtml=f"""
<iframe src='{volume.url}' style='min-height: calc(100%); width: calc(100%);'></iframe>"""
self.volumeHeaderDiv.inner_html=headerHtml
self.volumeDiv.inner_html=iframeHtml
Related
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 using the URL Params plugin to pull parameters into regular content using a short code. But I have to use a Raw HTML block to insert Typeform code into the page and I want to be able to pass a URL parameter into the Typeform code to track the source of the form submission.
I can't figure out how to do it. The form is working fine at: https://HelloExit.com/instant-valuation
But I want to be able to send people to https://HelloExit.com/instant-valuation/?source=XXXX and pull the XXXX into the Typeform code as the "source" value in the "data-url"
Here's what I tried:
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var source = getUrlVars()["source"];
</script>
<div
class="typeform-widget"
data-url="https://xgenius.typeform.com/to/zZHPPk?source=<script>document.write(source)</script>"
data-transparency="100"
data-hide-headers=true
data-hide-footer=true
style="width: 100%; height: 500px;">
</div>
<!-- Typeform embed code -->
<script>(function() { var qs,js,q,s,d=document, gi=d.getElementById,
ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm",
b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id;
js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })()
</script><div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5;padding-top: 5px;"> powered by Typeform</div>
Any assistance would be greatly appreciated!
You're close, but you'll need to use Javascript to alter the data-url attribute of your div.
// ...
var source = getUrlVars()["source"];
// concatenate the url with your source variable
var newUrl = `https://xgenius.typeform.com/to/zZHPPk?source=${source}`;
// get the element whose attributes you want to dynamically set
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
var widgetElement = document.querySelector('.typeform-widget');
// set the source attribute
// https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
widgetElement.setAttribute('data-url', newUrl);
Test this carefully, as it might still end up with a race condition (that is, the Typeform embed code might start running before you've updated the data-url attribute that it references).
I'm trying to integrate TrackerRMS on my WORDPRESS website. On the main jobs page, I have an iframe that produces a listing of jobs.
<iframe frameborder="0"
scrolling="yes"
width="1000"
height="780"
src="https://evoportalus.tracker-rms.com/mycompany/jobs?
theme=purplehaze
&fields=title,worktype,location,salaryfrom,salaryto,sector,joblink
&joblinkuri=http://example.com/jobs-detail&joblinktarget=_parent&filters=">
</iframe>
Once displayed, there is a button on the page with a link to apply for that job is in this format:
http://example.com/jobs-detail?jobcode=1234
The problem is that I need to be able to pass the number, 1234, into this iframe code, on the jobs-detail page.
<iframe frameborder="0"
scrolling="no"
width="100%"
height="700"
src="https://evoportalus.tracker-rms.com/mycompany/jobs
?theme=purplehaze
&fields=reference,title,location,worktype,description,linkregister
&filters=reference|JOBCODE-NUMBER-NEEDS TO APPEAR HERE">
</iframe>
What do I need to add to the second iframe code on the jobs-detail page to grab the jobcode number from the URL, and append it after the "reference|"?
Note again, this is a Wordpress site, so I'm just using a shortcode to insert raw HTML code onto the page.
Thank you.
Apparently this works, by adding this code to the jobs-detail page:
<script type="text/javascript">
loadSite();
function getQueryString (field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
function loadSite() {
var site = "https://evoportalus.tracker-rms.com/mycompany/jobs";
site += "?theme=purplehaze&fields=reference,title,location,worktype,description,linkregister&filters=reference|" + getQueryString("jobcode");
console.log(site);
document.getElementById('trmsjobs').src = site;
}
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 have a link google adword :
http://example.com?utm_campaign=Testcam&utm_medium=referral&utm_source=Blog&utm_content=blogers&utm_term=Test
When visitor click the link above to navigate to mysite. And then he submit a Marketo form (non Marketo form for landing page on my site).
I follow this article to create Mkto form on my site: http://community.marketo.com/MarketoResource?id=kA650000000GsPJCA0 to make sure when it submit it will get values from url parameters.
My problem on here is : Normally, this form just submit to the server to handle register. Beside that, when this form submmited, i also need it submit to Marketo for tracking. That a reason, Marketo form will be submit via iframe.
When i submit marketo form, it will be target to this iframe.
So, i need pass the url parameter into iframe to make sure when submit form, hidden fields will automatic get values from url parameters. But on this iframe, as you can see, it haven't src. I had try to add this to iframe:
$("#mktoformhidden").src = window.location.href;
but it doesn't work well.
What's the iframe src should be on here?
Thanks,
I would do something like this! Just replace "URL HERE" with your iframe url and of course update the sizing that you need in BOTH loactions.
<noscript>
<iframe src="YOUR URL HERE" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
</noscript>
<script type="text/javascript">
var iframeurl = 'YOUR URL HERE';
var params = window.location.search;
var thisScript = document.scripts[document.scripts.length - 1];
var iframe = document.createElement('iframe');
iframe.setAttribute('src', iframeurl + params);
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', 500);
iframe.setAttribute('type', 'text/html');
iframe.setAttribute('frameborder', 0);
iframe.setAttribute('allowTransparency', 'true');
iframe.style.border = '0';
thisScript.parentElement.replaceChild(iframe, thisScript);
</script>
My guess is that an iframe is not the best solution here. The iframe can create all sorts of cross site scripting and permission based concerns.
Why not just use the new forms functionality in Marketo so you can drop the form either on a landing page or embed on your site (they come with an embed source code).
Also, the munchkin tracking code automatically grabs "query" parameters so you can use those in smart lists or reporting.
Like sahutchi said, embedding the actual Marketo form into your site could be the way to go. I opted for the iframe approach to get Marketo to automatically fill in fields based on mkt_tok. This might be possible using Marketo forms, but I wasn't able to figure it out a month or two ago.
Here's a decent overview of ways that you can integrate Marketo forms with your site: http://www.elixiter.com/marketo-landing-page-and-form-hosting-options/
If you insist on doing it the iframe way, here's my setup to pass query string params down to the embedded iframe:
This is in http://yourdomain.com/my-marketo-page:
<div class="lazy-iframe" data-src="//pages.yourdomain.com/MyMarketoPage.html" style="width: 960px; height: 1000px;">
</div>
And in some shared library (but you can have it on the same page, and simplify it a bit):
<script>
$(function() {
var $lazyIframe = $('.lazy-iframe');
if ($lazyIframe.length) {
var src = $lazyIframe.attr('data-src');
if (src) {
var $iframe = $('<iframe src="' + src + location.search + '"></iframe>');
$iframe.attr({
scrolling: 'no',
frameborder: 0
});
$lazyIframe.replaceWith($iframe);
}
}
});
</script>
Given that pages.yourdomain.com is your CNAME to your Marketo domain.
In my email, I just link to http://yourdomain.com/my-marketo-page, and Marketo will automatically add the mkt_tok for that email recipient to the end of that URL (becoming http://yourdomain.com/my-marketo-page?mkt_tok=BLAHBLAHBLAH). Then the iframe is constructed with the data-src URL and all of the parameters attached, and with no scrolling nor frameborder (up to you).