Using React-Markdown on Next.JS, the post pages are stored as Markdown files, but for some reason the Markdown file won't render the iFrame. However if I use a standard Markdown Editor such as the one I created markdown-edit.now.sh the embed code works perfectly fine.
Any reason as to why it wouldn't be loading on my pages but is fine in
Embed Code
<iframe src="https://open.spotify.com/embed/album/0BRICN5TGMT1WqFcZkYOaF" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Try this:
<ReactMarkdown escapeHtml={false} source={blog.content} />
ReactMarkdown handles iframes as "dangerous html". To disable this just do:
<ReactMarkdown allowDangerousHtml={true}>Your content here<ReactMarkdown/>
Related
A pre-built Hugo website template I have has an iframe (from Google Maps) in the HTML of one of its pages.
<div class="map">
<iframe src="https://www.google.com/maps/embed?...."
width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
The layout of the resulting webpage is exactly my desired output, but I would like to replace the iframe with a static jpg.
The static jpg I would like to link to is on a different page (but part of the same pre-built Hugo template site), which seems to be generated by a *.toml file:
[params.about]
image = "images/about/photo1.jpg"
Unfortunately, I do not know any HTML nor any toml. Is there any easy way for me to replace the iframe with the jpg?
Or if it's not as easy as a simple cut and paste, are there some particular aspects of HTML that I should read up on?
This is probably not the best answer, but if anyone is looking for a workaround to this sort of a question, this is what I did.
I ended up uploading the jpg to imgur and then changing the iframe tags with a simple img tag:
<div class="map">
<img src="https://www.imgur.com/...."
width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></img>
</div>
If anyone has a better solution, so that I don't have to refer to the src= from a website like imgur, I'd be all ears. I suppose I could try to work out the relative path of where the images are kept, but I'm not sure how to go back up a directory tree.
I'm using php, I'm creating a detailed view page of a profile, which has a pdf document, I use the embed tag to display it, but when opened it does not display the pdf file and Automatically download the file. Therefore the user can not see the pdf file displayed.
<embed src="/vh/assets/image/java.pdf" type="application/pdf" width="500" height="500"/>
Is there a way to solve this problem?
PDF documents are not supported as a src in the HTML <embed> tag.
You can get around this issue by using the Google Chrome PDF viewer as the embed `src.
<embed
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://yourdomain.com/vh/assets/image/java.pdf"
width="500"
height="500"
/>
Note that your url in the src cannot be relative /vh/assets/image/java.pdf, it must be the full url http://yourdomain.com/vh/assets/image/java.pdf.
There also exist some third party libaries such as PDF.JS.
You can refer to w3schools embed tag,It is an html single tag,I can display pdf normally in chrome and firefox.Maybe you can check if your src is correct.
You can try below snippet #toolbar=0 helps disabling the options
<embed id="myObject1" src="file:///C:/Downloads/OoPdfFormExample.pdf#toolbar=0" type="application/pdf" width="1000px" height="600px">
This will disable download, print and other option of pdf viewer on browser
I'm trying to load facebook posts inside a local html file by html code provided via Facebook post's 3 dot menu "..." -> Embed button.
It looks something like this.
<iframe src="https://web.facebook.com/plugins/post.php?href=https%3A%2F%2Fweb.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=500" width="500" height="313" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
When it's on server it works properly, but when loaded from a local html file, I'm getting "This Facebook post cannot be loaded." message.
I need to load it locally. Any ideas?
Does anyone know if it's possible to embed a Google Map using iframe into a Github pages page built using the automatic page generator?
For example, I would like to embed something like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d100921.8397227734!2d-122.50711698562192!3d37.77111185957552!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sGithub!5e0!3m2!1sen!2sus!4v1464784986282" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
When I try to embed the above, however, the iframe element appears to be stripped from the final HTML so that no map is shown.
I looked around a bit and couldn't find much information on embedding maps, or in general, using iframe elements in Github pages.
People appear to have luck embedding Youtube videos within an iframe, but the same tweak does not help with the maps.
Any suggestions?
You will not be allowed to insert iframe from the page generator.
You have to edit your page from, for example, https://github.com/username/repositoryname/blob/gh-pages/index.html, by clicking on edit button (see picture) and insert your iframe code.
I need to display a PDF on a website and have it embedded inline.
The following code works if the data attribute is local, but not remote. I just get a large grey box in place of the PDF. I'm open to any solution as long as it works in all browsers. We are using Rails 3 and jQuery.
<object data='https://remotesite.com/uploads/pdf/5/mypdf.pdf' type='application/pdf' width='100%' height='100%'>
<p>
It appears your Web browser is not configured to display PDF files.
No worries, just <a href='https://remotesite.com/uploads/pdf/5/mypdf.pdf'>click here to download the PDF file.</a>
</p>
</object>
Thanks,
Nick
I tried this. works fine. just the link you supported is not OK. (I cannot reach\download that pdf other way)
But you can try this also:
<iframe src="http://people.seas.harvard.edu/~chong/pubs/oopsla04.pdf" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
your code worked fine with this pdf I used for the iframe.
(i tested both on chrome and internet explorer)