I'm using WKWebView to display html5 video element. When view is loaded initially there is play button (big round button). If you press it built-in video fullscreen controller is displayed and video starts playing.
While video is playing press "Done" button:
1. fullscreen controller collapses and I see my webview
2. but there is no play button anymore (so I can't start playing video again)
If you first pause video and that press "Done", or watch video to the end and then press "Done" everything is fine.
Works on IOS8 without issues.
Is it IOS9 bug, or I have something configured wrong?
What workarounds are possible?
Here is html that is loaded into webview:
#"<!DOCTYPE html>
<html>
<head>
<meta name=""viewport"" content=""width=device-width, initial-scale=1, user-scalable=no"">
<style>
html, body {{
margin: 0;
padding: 0;
background-color: #000;
}}
video {{
background-color: #000;
width: 100%;
height: auto;
max-height: 100%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}}
</style>
</head>
<body>
<video poster=""{0}""><source src=""{1}"" /></video>
</body>
</html>";
The problem was missed controls attribute.
From Apple documentation:
The HTML5 and tags make it simple to add media to your website. Just include the <audio> or <video> element, use the src attribute to identify the media source, and include the controls attribute.
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html
Related
I have searched and tried every possible example I can find. Here is my goal. I have a starter template for tabs. Each tab will open an page that will load a different path from a remote domain (using https) via an iframe. In android, it works as I would hope. In IOS, from what I have read, the iframe "height:100%" actually goes to the height of the content in the iframe, instead of the viewable area on the app, so the fixed header scrolls with the page, because for all it thinks, is that you have a really tall screen. What I need to happen is when you scroll, the fixed header stays at the top. Here is the code:
Component for Tab HTML
<ion-content >
<div class="iframe-fix">
<iframe
[src]="myurl"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
</ion-content>
From the forums I found a few tricks that should work, and created this css file that I include in the index.html:
.iframe-fix iframe {
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
margin-top: 40px;
}
.iframe-fix {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
Would appreciate any help/suppport. Thanks!!
I want to embed videos on my tumblr http://wealhwealh.tumblr.com/, but the block sizes is 250x141. When I start a video, it looks like this:
https://jsfiddle.net/pp4p1efw/
I want the video to expand when the user clicks on play, or on hover. Thanks!
Here's the tumblr html for video:
<video tabindex="-1" class="video-stream html5-main-video" style="width: 250px; height: 141px; left: 0px; top: 0px; transform: none;" src="blob:https%3A//www.youtube.com/48ae4f07-e8b1-4cf0-8890-5a896b7c1c82"></video>
I am working on an quiz application and I am trying to make it responsive so that it looks good on all devices. The application is an html5 application and is contained in an iframe and set to fill the entire iframe. The native width of the application is 640px and the height is 880px (this is how I calculated the padding-bottom to be 137.5%). It works great on computers and on Android devices but it does not work on iOS devices. Everything I'm reading seems to suggest that I've done it correctly but on the iphone the application is too wide for the screen in portrait mode.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="iframeresponsive_mobile.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Student Quizzes</title>
</head>
<body>
<!--comment: this next section makes a container div for the page with a max width (defined by css)-->
<div class="pagecontainer">
<div class="intrinsic-container"><!--comment: iframe div begins-->
<iframe src="scrolling/index.html">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div><!--comment: iframe div ends-->
<div class="ad"> <!--comment: ad div starts-->
This is an add div...
</div><!--comment: ad div ends-->
</div><!--comment: pagecontainer div ends-->
</body>
</html>
and here is the CSS code:
body {
margin-left: auto;
margin-right: auto;
background-color: black;
}
.intrinsic-container {
position: relative;
clear:both;
height: 0;
overflow: hidden;
/* to get padding-bottom divide the numbers of aspect ratio */
padding-bottom: 137.5%;
z-index: 3;
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
border:0px;
margin:0px;
}
.ad{
background-color:lime;
height:80px;
width:100%
}
/* comment: page formatting make a container to constrain width and center */
.pagecontainer {
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
I have included (to my knowledge) the correct meta viewport tag. Why does this work so well in Android but fails in iOS?
I found that the solution was to add the following code to the canvas element on the page
style="width: 1px; min-width:100%"
I had seen this code on stack overflow before but it didn't work until I added the above css to the canvas. I hope this helps someone with a similar problem.
Brett
I want to modify the following code for a YouTube subscribe button with counter, so that after subscribing, or if you are already subscribed, the button can be clicked to take you to the YouTube page in question.
<iframe data-gapiattached="true" frameborder="0" hspace="0" marginheight="0"
marginwidth="0" scrolling="no"
src="https://www.youtube.com/subscribe_embed?bsv&usegapi=1&channel=SingularityUtopia"
style="height: 24px; left: 0px; margin: 0px; position: static; top: 0px;
visibility: visible; width: 170px;" tabindex="0" vspace="0" width="100%">
</iframe>
Also in Firefox I see a blueish possible box-shadow, to the right of the button at the left pointer of the count-box. It occurs after clicking subscribe or unsubscribe (focus?), and I want to remove that.
That click isn't possible since the subscribe button is coming from an external source in this case www-subscribe-embed-vflxZ9bg5.js
Another question, where did you find this button ?
UPDATE:
This is not the right embed code. It should be
<div class="g-ytsubscribe" data-channel="CHANNELNAME"></div>
<script src="https://apis.google.com/js/plusone.js"></script>
Read more here iframe www.youtube.com/subscribe_embed? google plus
I have included the Facebook like box code on my website. However for some reason when viewed on an iPad the embedded Youtube links show outside the iframe (the other content does not). I have tried wrapping this with a div and applying overflow: hidden but still no joy.
It works fine on all browsers on the PC (including Safari) and as such I cannot figure out where to go with this one.
Usually with embedded videos I include wmode="transparent" in the embed code which usually sorts it. However because Facebook generates the code so I cannot access the content generated in the widget.
Any help would be much appreciated, as I have been banging my head against the wall about this for days.
Cheers
HTML
<div id="fb-root">
<iframe id="facebookscroller"
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMorgan-Motor-Company%2F209507192406727&width=450&colorscheme=dark&show_faces=false&border_color&stream=true&header=false&height=395"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:450px; height:395px;"
allowTransparency="false"
wmode="transparent">
</iframe>
</div>
CSS:
#fb-root {
position: absolute;
top: 50px;
right: 10px;
z-index: 4;
height: 395px;
overflow: hidden;
display: block;
}