javascript - How to make an iframe responsive full height and full width -

-

i'm embedding youtube/dailymotion videos , want make iframe responsive , full height , same height window :

i made responsive iframe not full height !

here code

   <div  class="video-container">                        <iframe height="100%" width="100%"  src="https://www.youtube.com/embed/7ipiybrlqzc" frameborder="0" allowfullscreen></iframe>                  </div>

css :

.video-container {     position: relative;     padding-bottom: 100%;     height:100%;  }  .video-container iframe, .video-container object, .video-container embed {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     margin:0px; }

demo + code js fiddle

use viewport percentage lengths, vw , vh set height , width of iframe. optionally, use calc subtract 4px player seems add this.

viewport-percentage lengths defined length relatively size of viewport, visible portion of document. gecko-based browsers updating viewport values dynamically, when size of viewport modified (by modifying size of window on desktop computer or turning device on phone or tablet).

body {    margin: 0;  }  iframe {    height:calc(100vh - 4px);    width:calc(100vw - 4px);    box-sizing: border-box;  }
<iframe src="https://www.youtube.com/embed/7ipiybrlqzc" frameborder="0" allowfullscreen></iframe>


Comments

Post a Comment

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

-
Image
i have similar problem described in how prevent numbers being changed exponential form in python matplotlib figure : i don't want (in special case) weird scientific formatting of axis. problem different have problem @ z -axis. 2-d plots can use ax.get_yaxis().get_major_formatter().set_useoffset(false) . , there no function ax.get_zaxis() what use format z -axis same way? edit: example: from mpl_toolkits.mplot3d import axes3d import numpy np import sys import matplotlib import matplotlib.pyplot pyplot def func(xi, ti): res = 10e3 + np.cos(ti) * np.sin(xi) return res if __name__ == '__main__': timespacing = 20 timestart = 0 timeend = 1 time = np.linspace(timestart, timeend, timespacing) widthspacing = 50 widthstart = 0 widthend = 3 width = np.linspace(widthstart, widthend, widthspacing) reslist = [] matplotlib.rcparams['legend.fontsize'] = 10 fig = pyplot.figure() ax = fig.gca(projection = '3d...
Read more

python - PIL cannot identify image file for io.BytesIO object -

-
i using pillow fork of pil , keep receiving error oserror: cannot identify image file <_io.bytesio object @ 0x103a47468> when trying open image. using virtualenv python 3.4 , no installation of pil. i have tried find solution based on others encountering same problem, however, solutions did not work me. here code: from pil import image import io # portion part of test code byteimg = image.open("some/location/to/a/file/in/my/directories.png").tobytes() # non test code databytesio = io.bytesio(byteimg) image.open(databytesio) # <- error here the image exists in initial opening of file , gets converted bytes. appears work else can't figure out why fails me. edit: databytesio.seek(0) does not work solution (tried it) since i'm not saving image via stream, i'm instantiating bytesio data, therefore (if i'm thinking of correctly) seek should @ 0. (this solution author himself. have moved here.) solution: # portion part ...
Read more

java - disabling a node without disable its children in javafx -

-
is there solution disable node in javafx without disabling children ? want disable nodes in pane except 1 of them dynamically. tried solution , other solutions doesn't work , think has bad performance! node.getparent().requestfocus(); for(int i=0 ; i<pane.getchildren().size() ; i++){ if( !pane.getchildren().get(i).isfocused()){ pane.getchildren().get(i).setdisable(true); } } edited: also tried solution: added transparent pane main pain , add special node . doesb't work complex components because should keep sizes , locations of it's children ! i want user interact 1 node of whole scene , other nodes should disable . the current javadoc of booleanproperty disableproperty() of node says: "...... setting disable true cause node , subnodes become disabled ....... https://docs.oracle.com/javase/8/javafx/api/javafx/scene/node.html#setdisable-boolean- https://docs.oracle.com/javase/8/javafx/api/javafx/scene/node.h...
Read more