Develop Reference

Play youtube video in full screen

I know this questions has been asked numerous times but I can't seem to fix the problem at my case. So I have added youtube video iframe to my website and while the video isn't playing it shows it in a full screen. Then when I click play it adds gaps on left and right and video isn't playing in a full size. I checked from console and found out that the video tag is caussing problems. I tried adding css to video tag but it seems like its not even showing in console, so it's not added.
HTML:
<iframe height="450" src="https://www.youtube.com/embed/ftAQc3L1gR4?rel=0&autoplay=0&loop=0&modestbranding=0&showinfo=0&feature=0&controls=0&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" id="player_1" style="width: 100%;"></iframe>
CSS:
iframe video {
width: 100% inherit !important;;
height: inherit !important;
left: inherit !important;
top: inherit !important;
position: relative !important;
}
You can check the issue here: https://raadev.wpengine.com
You can go to the third slides and there will be a youtube iframe showing in 100% width, but when you click play it will show gaps on both sides.
Can anyone please help me fix this issue?

<div class="videoContainer">
<iframe class="videoContainer__video" width="1920" height="1080" src="http://www.youtube.com/embed/IsBInsOj8TY?modestbranding=1&autoplay=1&controls=0&fs=0&loop=1&rel=0&showinfo=0&disablekb=1&playlist=IsBInsOj8TY" frameborder="0"></iframe>
</div>
And your CSS should be something like this:
.videoContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
iframe {
/* optional */
width: 100%;
height: 100%;
}

I remembered I had this problem long time ago and I made an answer here: Scale and reposition iframe like background-size: cover
It needs jQuery to make it work. (and change slightlly your iframe properties)
Fiddle

From my experience you will not be able to with your current (Desktop) slider height.
Youtube will always try to keep the aspect ratio of the video so given the restriction of container widths and heights you will sometimes see black "bars" from either the left and right or top and bottom.
I deal with it by making my video link and a thumbnail and after clicking that thumbnail i open a pupup with the iframe or video i want to display.
Just keep in mind the aspect ration
Recommended YouTube video dimensions: 240p (426 x 240), 360p (640 x 360), 480p (854 x 480), 720p (1280 x 720), 1080p (1920 x 1080), 1440p (2560 x 1440), 2160p (380 x 2160) - (Source by: Kristen McCabe)
Hope this helps =]

iframe and cordova/ionic back button

i am using iframe to load up a webpage inside one of my view for ionic.
<iframe name="siteFrame" id="siteFrame" src="www.example.com" style="width:100%; height:100%" height="100%" ></iframe>
what happens is that when the backbutton is pressed instead of going back to the previous page in the iframe the app exists.
i cannot detect the current href of the iframe as the cross domain security issues prevents me.
what i want to do is that the phones back button should work on the iframe but when the iframe is at it's home page the backbutton should work for the views then
How can this be done?

The problem is that Cordova is linking the back button to the webviews back command, and if it's not going back in the iframe, the iframe is never forming part of your webviews history (which it should be, but I could be wrong - have you changed how your history is working at all?)
What you could try is capturing the back action yourself, and using it to instruct the iframe to go back a page.
One method for this is document.addEventListener("backbutton", yourFunctionHere, false);, where you then instruct the iframe to go back within the yourFunctionHere call using iframe.contentWindow.history.back();
I haven't tested any of the above but hopefully this should give you a starting point you can work off. However given you're working cross-domain, it's possible access to even the back() command is restricted, in which case you're probably out of luck.
You can find the relevant Cordova documentation here, just in case: https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html

To handle ionic back button press event and navigate the iframe from there. check the below link
Click here

Its work to me!
.close{
position: absolute; z-index: 100; background-color: transparent;
width: 100%; height: 50px; margin-top: 1.5rem;
img{ width: 32px; height: 32px; float: right; margin-right: 1.2rem; margin-top: 1rem; }
}
.iframe{ position: relative; z-index: 99; }

Keeping A Video Centered, allowing left overflow

Hello Stackoverflow community,
I am wondering how to get a hero background video to stay centered in the page no matter what, such as this http://thisisdk.com/
Purely through css, or through very minimal js.
The problem I have had is that I cannot keep the video in the center while resizing the window. I am okay with cropping! I just want it in the center without resizing.
This is my current test page, https://dl.dropboxusercontent.com/u/96682768/VidTest.html
#intVid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: 100%; z-index: -100;
background-size: cover;}
<video id="intVid" preload="auto" autoplay="autoplay" loop="loop" ><source src="showtest.mp4" type="video/mp4">bgvideo</video>
I have searched the web for a few hours and found no solution... not sure if this is over my head.
Thank you in advance!

Iframe full height in a wordpress page problems (without scroll bar)

Am trying to get this code
<iframe src="http://www.play-asia.com/paOS-38-19-0,,none,0,0,0,0,trans,000000,left,0,0-49-en-76-5-70-dhf7-6-2-78-2i-90-f8z9-33-iframe_banner-40-6-44-100%2525.html" style="border-style: none; border-width: 0px; border-color: #FFFFFF; padding: 0px; margin: 0px; scrolling: vertical; frameborder: 0;" scrolling="vertical" frameborder="0" width="100%25" height="1428"></iframe>
To fill the page (height wise) and also without the scroll bar ive tryed and tryed to use css without any luck
Anyone have any ideas how/if I do do this?
Thanks

Make the iframe absolutely positioned:
iframe { position: absolute; top: 0px; left: 0px;}
You talk about filling the page height-wise but you have a set height. You also talk 'without scrollbars' but you have scrolling turned on. The code above will help your iframe jump out of it's container to fill the page as long as its container is not position: relative

Try style="overflow: none;" as an iframe atribute

Puzzle: different domain iframe needs to dynamically "overlap" parent content

This should be a fun puzzle for you Stack Overflow geniuses:
I'm building a browser plugin that will inject a div, script, and iframe into the markup of whatever page the client is viewing. The purpose is to anchor a toolbar onto the bottom of every page (StumbleUpon does this for Chrome). Here's the code that is placed before </body>:
<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
<iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>
This toolbar (iframe) will be hosted on our server and has pop-out panels. When a user clicks to open a menu, the menu vertically extends the toolbar (e.g., toolbar height is 35px; with panel is 100px).
I can accomplish this in Safari, Firefox, and Chrome by having my toolbar sit on top of everything on a transparent background (i.e., height: 100% and background-color: transparent for both the div and iframe). But this doesn't work for IE7, IE8, IE9.
I've tried (1) doing background: blank.gif instead of background-color: transparent, and (2) injecting a script into the parent with a resizing function that I could call on with parent.resizeFunction(height) ("resource denied")
Any ideas on how to solve this?? Thanks so much!

I have to run so I can't test it, but IE seems to listen to the non-standard ALLOWTRANSPARENCY property.
When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.