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
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 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 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 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 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;
}