I'm embedding a youtube video to act as my header image on my homepage. The video loads perfectly and is responsive to my window but when I hit play, the black bars appear. Is there a way to remove that?
homepage screenshot
video when playing
Here's a sample of my HTML/CSS
.responsive-vid {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.responsive-vid iframe, .responsive-vid object, .yresponsive-vid embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="responsive-vid"><iframe src="https://www.youtube.com/embed/kY_ySOpTYIE?rel=0&controls=0&showinfo=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
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 add youtube video on website. I want, There will have only control panel. and need to hide top title and logo.
But If hide the title, then never hide logo / watermark logo.
But I need to hide twice (title+logo).
How can I do this ?
This is my code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Oo00q-l8VKQ?modestbranding=1&autoplay=0&rel=0&showinfo=0" frameborder="0" allowfullscreen>
</iframe>
Try try this jsfiddle.net
<style>
.video-wrapper {height: 153px; width: 272px; position: relative; overflow:hidden}
#YouTubeVideo1 {height: 262px; width: 272px; position: absolute; margin-top:-55px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-wrapper">
<iframe id="ytplayer" type="text/html" width="272" height="252"
src="https://www.youtube.com/embed/M5h3U_nNn3k?autoplay=1&controls=0&fs=0&rel=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>
</div>
As you should have read from HERE, it is not possible to remove ALL branding from the player window.
It is a corporate product that they have made. As such they advertise that it is their player (from their site) for their use with sharing functionality for us.
Considering the work that goes into a product like the YT-Player, and that they give us so much access to the api. I think it is reasonable.
If you do not want any branding, you should have your own player and content.
I am trying to display an image that when clicked will open up a video player in html 5, but I don't want the little semi-transparent play button to appear over it. Is there any way to specify in the tag not to put that icon over the poster image and just display the poster image as is?
You can hide the overlay play button on the iPhone with just some CSS:
video::-webkit-media-controls-start-playback-button {
display: none;
}
Update: This is no longer the best method - see this answer below for an actual solution.
As far as I'm aware, the play button overlay is added by the rendering engine in mobile Safari, so no there is no way to hide it. However, you may be able to spoof it using ajax to load the video when a static image is clicked. For example:
HTML
<div id="videoContainer">
</div>
CSS
#videoContainer {
background-image: url(http://placehold.it/60x40.png);
height: 40px;
width: 60px;
}
JavaScript
$("#videoContainer").click(function() {
$(this).css('background', 'none').parent().html("<video id=\"video\" width=\"60\" height=\"40\">\n" +
"<source src=\"video.mp4\" type=\"video/mp4\">\n" +
"<source src=\"video.ogg\" type=\"video/ogg\">\n" +
"</video>");
$("#video").get(0).play();
});
You should try this
video::-webkit-media-controls {
display: none;
}
This works fine in any Browser, but not on iOS6 (did not try it with iOS5)
I got an iFrame with a YouTube Video in it, situated in an overlay. After playing the video and toggle the overlay, the video again is broken. The video will playback in the background (you will hear the sound), but its not visible anymore.
Here's a minimal example:
http://jsfiddle.net/s9M6J/2/
<script>
/* jQuery */
$(document).ready(function() {
$('a').click(function() {
$('.videowrapper').toggleClass('hidden');
});
});
</script>
<style>
.hidden{
display: none;
}
</style>
<body>
toggleVideo
<div style="background: green; width: 500px; height: 500px;">
<div class="videowrapper">
<div id="video1">
<iframe width="500" height="315" src="http://www.youtube.com/embed/HMrlFLZFdnQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
Does anyone know a workaround for that?
Got a similar issue when embedding a Brightcove video on a jQuery Mobile page which is shown/hidden via javascript. Works on all desktop browsers and android but not Safari on iOS 6.
According to http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/m-p/17558#M2352 a workaround is to hide your videowraper by moving it out of the screen using some CSS like position:absolute;top:-9999px then back to normal positioning when you want to show it.
For jQuery Mobile users it means embedding video iframes on multiple <div data-role="page"> on a single page structure won't work, need to put them on separate html pages.
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;
}