So basically I recently made a video for a assignment and I copied the embedded code from You tube and pasted it in Brackets.io and after I clicked save and then pressed live preview it didn't work and when I went to the website that shows you the many reasons why live preview won't work one of those reasons was
"Bug #7935: Live CSS does not update if page contains an iframe (including injected iframes such as ads or social media buttons)."
So how do I fix this?
If Anyone knows please reply back to me!
I suppose you use for embedding a video a kind of code like this:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
I usually use this for holding videos in my webs, so if this still gives you problems, you should use another editor, maybe Visual Studio Code and install an extension call Live Server by Ritwick Dey, which does the same as Bracket's Live Preview.
I have the code below which is a perfect solution to what I need, which would essentially be embedding any of JPG, GIF, PNG or PDF files in my webpages. It works perfectly in PC browsers, but a critical requirement for the pages is to have them compatible in mobile browsers due to its target users.
<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>
Although image files work fine, PDF files are opened separately in the mobile browser and not embedded inline in the web page. What would be an alternative solution or implementation to this?
You can use PDFJs library. Using just JS you can render pdf files.
Please , check here : https://mozilla.github.io/pdf.js/
One simple option is that the the object element provides a fallback, so you can do:
<object data='some.pdf'>
<p>Oops! Your browser doesn't support PDFs!</p>
<p>Download Instead</p>
</object>
Then, when the mobile browser can't get the item, it'll just show this and you'll be all set, kinda.
Here is my solution to this problem.
<object data="mypdf.pdf" type="application/pdf" frameborder="0" width="100%" height="600px" style="padding: 20px;">
<embed src="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing" width="100%" height="600px"/>
</object>
Explanation:
<object> tag has a feature that when it is unable to load item, it loads the content inside itself i.e tag.
Since object tag cannot load on mobile view, therefore on mobile devices, embed tag will become active.
Q) Why can't we directly use tag for all cases?
You can actually, but since the embed tag is loading file from
drive, it does not gives any user controls for the pdf that we see
with object tag (zoom, page no., etc.). So our code will give the user pdf view controls atleast in the desktop mode instead of not giving any controls at all.
Q) Direct drive links don't work....so why this solution?
In the above google drive URL, view is changed to preview.
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/view?usp=sharing
becomes,
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing
So, we can make direct drive links work with this little modification
Google Docs viewer offers a feature, that lets you embed PDF files and PowerPoint presentations on a web page.
<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:100%; height:650px;" frameborder="0"></iframe>
replace the URL(http://infolab.stanford.edu/pub/papers/google.pdf) with your own address, It's worked for me but it takes more time to load on
src:http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html?utm_source=pocket_mylist
The only way I have found, which allows you to embed pdf is using Google drive, then select the menu button once you have opened your file, and select get embed code, you can only use a Google drive or Google docs reference. And you must also turn public sharing on otherwise others won't be able to view it without permission.
Using Adobe PDF Embed API solved my problem.
Adobe PDF Embed API
I ran into the same issue. As a new developer, I wasn't aware that mobile browsers have issues embedding PDF files in iframes. I am now... lol
I racked my resources trying to get this to work when it dawned on me that mobile browsers do not have an issue displaying PNG files in a new window. So, in my infinite wisdom, I opened the PDF files in Gimp 2.0 then exported them as PNG files. And then I created buttons for the user to click and now it opens the graphic instead of trying to embed the PDF.
Looks like this:
<input class="AG" id="UnityBtn" type="button" value="Unity" onclick="location.href='../Meeting_Info/Unity.png'" />
I don't know if this is possible for you, but it worked beautifully for me.
Use an object tag with a iframe tag inside your object tags.
The object data can be a pdf or png file by changing the type and can use any link you want stored wherever, however the I frame is the one which will be loaded for mobiles which has to be a link from Google drive or Google docs you also need to allow the files to be shared public otherwise others won't be able to view them.
I would share the code but this site has some rubbish rules about code and won't let me share them so I'll leave you to Google how object and iframe tags work by viewing better sites that actually wants the help from developers.
Have fun guys!
I'm trying to create a page on my WordPress site using an HTML file. When I enter the code and preview the page, the title and footer are displayed, with the message "No HTML5 canvas!" in between them. I have this line of code in my script, which as far as I understand should be creating the canvas:
<canvas id="screen" name="screen" width=480 height=480 class="noselect">No HTML5 canvas!
</canvas>
This is my first time working with HTML, apologies if I'm missing something. Any help anyone can provide would be appreciated.
your code is working fine, here is a fiddle to prove it, the problem might be your browser
<canvas id="screen" name="screen" width=480 height=480 class="noselect">No HTML5 canvas!
</canvas>
check out this page for a list of browsers that support html 5 canvas
Contacted WordPress support and it turns out the site simply doesn't support Canvas.
Could you not code your html file the way you want with your canvas tag in it, upload it to an external site and then in your WordPress site use an iFrame and set the src to be your html file with the canvas tag? This might be a way around your problem
<iframe src="http://www.google.com"></iframe>
Or either try this http://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/
There's a section on my site where I display data from another site, using:
<embed src="URL"></embed>
I recently discovered that this works fine for most people, but that Firefox users get an error telling them they need to install a plugin. I searched around for a solution and people seemed to find that specifying the MIME type worked:
<embed type="text/html" src="URL"></embed>
But this isn't working. I can switch to iFrames, but I dislike how they display the information. Any other suggestions?
Per spec, embed elements are only handled via plug-ins or an SVG renderer (and in the latter case behave just like iframe).
You can do <object data="URL"></object>, but of course that will also behave like iframe...
I've been having the same issue with an html5 game. It appears that Firefox doesn't support if you want to embed an external html file. This tag should only be used for plugins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
To embed an external html file into another page in Firefox you have to use iframe or object tags instead. For the interactive nature of my external page I used iframe and it worked in IE / Chrome and FF, I had to make the margins larger than the game itself.
We allow users of our application to embed a webpage containing a set of thumbnails into another third party webpage/blog etc. The embedding is done by using an object tag.
Each thumbnail provides an option to download original file. When user clicks on this option, the embedded content is disappearing in Safari 5.1.1 and Chrome 15.0 and instead "Could not render embedded content" is shown. Whereas FF 8.0 works correctly i.e. the embedded page stays there even after download, as it should.
The embed code we are using is like this -
<object data="http://myserver.com/em.aspx?e=FytXStk=" height="600" width="900" type="text/html">
<p>Could not render embedded content.</p>
</object>
Can anyone see what might be wrong here? Thanks.
I had to add target="_parent" for the download link. That did the trick.
Actually, if you just choose "Shockwave" instead of "Flash" from the drop down menu for video type, it all works perfectly.
Joomla Core Team has gotta do a better job on notifying developers and webmasters. It's obviously not obvious.