I am noticing that adobe echosign is setting default minimum height and width using pixels while generating the Iframe for Personal Embedded widgets. I checked the below link (& other REST api documentations) and can't find a property to tell echosign to render the widget in a scalable mode according to width/height dimension of the device as in mobile, tablets or PC.
Api Documentation->
https://secure.na1.echosign.com/public/docs/restapi/v5#!/widgets/createWidget
Adobe EchoSign default Iframe Render setting->
<iframe src="******" width="100%" height="100%" frameborder="0" style="border: 0; overflow: hidden; min-height: 500px; min-width: 600px;"></iframe>
How to tell echosign REST api to dynamically adjust it's Iframe size?
I tried finding a solution to this also, but the short of it is that it can't be done with their widgets. None of their internal settings or the API allow a way to modify the iframe styling.
What does work, however, is adding a little javascript and css to modify the iframe. Here's an example of javascript code you can use:
document.getElementsByTagName("iframe")[0].setAttribute("id", "echosignwidget");
document.getElementByID("echosignwidget").removeAttribute("style");
By adding an id and removing the inline style attributes you are now free to style the element however you please using CSS.
Related
I added video from media library to my page from content edit box.
no matter how i change the video size, it always on width:640px; cannot show lager in desktop display. it get smaller if view as mobile view.
I checked the CSS, not sure where to setup or change these in CSS.
My testing page now is on http://54.183.134.28/ you can check the video in about us section.
The code i checked in content edit box and CSS inspect, please help, for some reason i do not want to use Youtube, have to load the video to media library.
my question now is is there any restrict for video display size in wordpress?
[video width="1920" height="1080" mp4="http://54.183.134.28/wp-content/uploads/2017/07/City-8248.mp4"][/video]
element.style {
width: 640px;
}
wp-mediaelement….css?ver=4.8:1
.wp-video {
max-width: 100%;
height: auto;
Try to use this css code
.flowplayer{max-width:650px;}
Then let me know the result.
Thanks
I am currently learning to use videos as a background on the websites I am developing. The issue that I am having is that I can't get the videos to actually appear. I believe it has to do with the way I have them stored in a folder, but after trying multiple different methods of accessing the files, I still can't get them to display. The goal is to have the video stored in the "videos" folder to be displayed as my page background. My question is, what elements am I missing for this to work? I have tried moving the files into the main folder as well as adjusting the CSS a few times. Both yielded no results.
My current setup is as followed:
My files are stored like this (I apologize for the link, I can't embed images yet):
File Hierarchy
backgroundVideo {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: URL(images/resBackground.jpg);
background-size: cover;
}
<body>
<video autoplay loop class="backgroundVideo">
<source src="videos/resVideoBackground.mp4" type="videos/mp4"/>Your browser does not support the video tag! Please upgrade your broswer!
<source src="videos/resVideoBackground.webm" type="videos/webm"/>Your browser does not support the video tag! Please upgrade your broswer!
<source src="videos/resVideoBackground.ogv" type="videos/ogv"/>Your browser does not support the video tag! Please upgrade your broswer!
</video>
</body>
Any guidance on how to get the video running is greatly appreciated!
Your file hierarchy and the way you are referencing your files from your CSS and HTML looks fine to me.
I notice a couple things right off the bat. The first is that, in your source elements, the proper type is a singular video/mp4, video/webm, and video/ogv.
Another common tactic when implementing background videos into websites is to add a little JavaScript that "kicks" them on browsers that don't like the autoplay attribute. For example (you'll need to add an id="backgroundVideo" to your video element for this to work):
<script type="text/javascript">
// Play the background video on Android devices that support the
// "canplay" event listener
var backgroundVideo= document.getElementById('backgroundVideo');
backgroundVideo.addEventListener('canplay', function() {
backgroundVideo.play();
});
</script>
I would add this script element, either externally or inline, at the very end of the body.
I'm very new to TVML and web development. I'm trying to use the tv-placeholder style tv to set a default image for an img
It works when I use the size configuration:
width: 520; height: 280;
However, It does not with the custom size
width: 1235; height: 314
I can advice you to implement your own TVML-item that will be used as an image with a custom placeholder (also, you will be able to implement cache policy). Read more about the TVMLKit. I think you will need to inherit TVImageElement class and override some methods. You will be able to use any images with any resolutions from any sources (local storage and other).
I am using Redactor v10.0.9 to allow users to create some custom posts for my web app. These posts are rendered in an iframe in a modal, and I need images that are uploaded to have a max-width of 100%. I have tried to maintain an outside stylesheet that I append to the iFrame that contains
img {
max-width: 100% !important; } }
But that doesn't seem to be working at all. I would like to just add style="max-width: 100%" inline style to the img tag when it's inserted, but I can't seem to find where the image is inserted into the post after an image upload.
Any ideas on how to force these images in an iFrame to be max-width: 100%? Thanks
Edit 1:
I am using the imagemanager plugin to upload images to Redactor. Forgot to mention that.
Edit 2:
The content contained in the iFrame is dynamically created HTML, not content from another domain.
Figured out how to do this!
Instead of appending any sort of style to the img tag on insertion, when I render the custom posts I am retrieving all of the images in the iFrame in JavaScript, and then applying a CSS attr of "max-width: 100%" on each one.
http://jsfiddle.net/fJkBU/1/
That's my code. Basically, I have an iFrame whose source may change. I need the containing DIV to expand vertically to accomodate whatever is inside the iFrame.
I can't get it to work. Any ideas?
MY CODE
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails: Welcome aboard</title>
</head>
<body>
<div id="page">
<div id="content">
<div id='commentLoader' style="width: 500px;">
<iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
</div>
</div>
</div>
</body>
</html>
All the other methods will not work, because...
...Mozilla (and all other major browsers, as pointed out in paislee's comment) has this thing called the "Same Origin Policy" which states:
The same origin policy prevents a document or script loaded from one
origin from getting or setting properties of a document from another
origin.
Essentially, Mozilla makes sure you cannot access another webpage's properties thru JavaScript because that would be a security hazard (for cookie hijacking and such I believe).
For example, here was a similar question when discussing an iframe for a page of the same origin; here is the answer as applied to your problem. As you can see in Firefox's error console, your "permission denied to access property document"...
Ok, so you have a couple of options now that you know you can't access the iframe's height thru JavaScript (because it is hosted on another domain):
Change it so you do control the contents of the iframe (then either put it under the same domain or use the solution posted in the similar question).
Assuming 1 is not possible you have to use your server to access the webpage. The first option here would be to screen scrape the contents of the iFrame and then display it
If you aren't up for writing a screen scraper you could use a proxy script and then display an iframe of your proxy (hosted on the same server); this would permit you to access the site as if it we're your own and the user would notice no difference (Note: I'm pretty sure this is against all terms of service/possibly illegal as the user could try to interact with the website (unaware it is loaded thru a proxy) in the iframe (i.e. login)... and you would effectively be phishing)
I am assuming that what is loaded in the iframe is a set of comments (IDs kind of gave it away), and I will also take the liberty of assuming each comment has a fixed height or maximum height. In which case you could write a php script that loads the page, counts the amount of comments (regex) and then multiplies number that by comment height to determine the appropriate height of the iframe
Good luck,
At the very most you'll get an iFrame to be the size of the window, not the contents' height. And, as you seem to want it to expand, why not just make the iFrame 100% height of the window from the start?
If the iFrame's loaded from the same domain you can try the Iframe SSI script II. I used this script way back for a class project but you can give it a shot.
I'm not sure I get your answer 100%, but if you want a container that expands vertically due to the content you can use jquery ajax. when you load content inside a it will generate a new height. give this div some style, and you have yourself a dynamic generated div height. basically, you will take this other page and put it on yours.
Do a search for cross-domain ajax. I've used it in the past and it wasn't pretty but worked!
Call the below Javascript function in Iframe onload event.
function autoResize(id)
{
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (newheight) + "px";
}
e.g:
<iframe id="commentIframe" onload="autoResize('commentIframe')" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
You've got single quotes around your CSS id. Replace them with double quotes like the rest of your code.
Change:
id='commentLoader'
to:
id="commentLoader"