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>
Related
I am building a website that plays an icecast mp3 stream using jPlayer and I'd want it to display the poster when listening the stream and the phone is locked.
jPlayer generates the following code which I guess it's the code that iOS uses for playing the audio, correct me if I am wrong.
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_1" src="https://example.com/wp-content/uploads/2018/09/logo.jpg" style="width: 0px; height: 0px; display: inline;">
<audio id="jp_audio_1" preload="none" src="http://example.com:8000/stream_64.mp3"></audio>
</div>
iOS only supports the poster art for video tags: Audio and Video HTML
I just started using wordpress and www.PlanetWeb.ca is my first site, but for the life of me I can not figure out why I can not scroll on mobile devices when embedding youtube, instagram , facebook comments, etc. Do I need to put <div> around embed?
Thanks for helping me
Here is one example where you can not scroll
Your iframe has the attribute scrolling="no". Change it to 'yes'?
<iframe id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" title="Twitter analytics iframe"></iframe>
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
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;
}