Follow Button of Twitter cross-browser - css

I want to add a Follow Button of Twitter on my mean-stack web page. I use the following code:
https://jsbin.com/herikik/3/edit?html,output
<iframe
src="https://platform.twitter.com/widgets/follow_button.html?screen_name=Google&show_screen_name=false&show_count=false&size=l"
title="Follow us on Twitter"
width="80"
height="30"
style="border: 0; overflow: hidden;"></iframe>
In Chrome under Mac, it works well. However, in Chrome and Edge under Windows, it shows:
Does anyone know how to modify the code such that it shows well cross-browser?

Try adding scrolling="no" to the <iframe>.
<iframe
src="https://platform.twitter.com/widgets/follow_button.html?screen_name=Google&show_screen_name=false&show_count=false&size=l"
title="Follow us on Twitter"
width="80"
height="30"
style="border: 0; overflow: hidden;"
scrolling="no">
</iframe>

Related

Share my article with custom image in twitter with iframe

How can I submit a photo in this Twitter share iframe. This is my iframe:
src="https://platform.twitter.com/widgets/tweet_button.html?url=MyUrl&text=${encodeURIComponent(MyTitle)}&image%3D${encodeURIComponent(image)}" width="100" height="100" style="border: 0; overflow: hidden;"
I tried many things but it doesn't work.

Inline video.js video play iPhone

Hey guys hope all well...
I need this code to play inline on iPhone
<iframe width="560" height="300" src="https://yeco.online/VideoPlayer/mix54fm" style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;" scrolling="no" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
What do I do here where do I add the variable for inline and what is the varible for inline?
Thx!
David
You need to set playsinline on the <video> element inside the iframe.

iframe tag doesn't work in IE

I have problem with ie
my code is
<div style="text-align: right"><iframe style="height: 900px; width: 720px" src="mypage.php" frameborder="0" scrolling="no" seamless=""></iframe></div>
it's work in chrome,Firefox, ie 10 but doesn't work in ie6,7,8,9
please help me
Not clear on what error you are getting but I used the following code to make a quick IFrame and it runs in IE version 7,8,9,10.
<div style="text-align: right">
<iframe src="your page you want to reference" scrolling="no" frameborder="0" height="900px" width="720px" seamless="">
</iframe>
</div>
Hope this helps.

facebook login and youtube embed iframe clash

so i have the two following iframe codes:
<iframe title="YouTube video player" class="youtube-player" type="text/html" src="some youtube url" allowfullscreen="" showinfo="0" frameborder="0" height="390" width="590"></iframe>
and
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=someid&xfbml=1"></script><fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
which when i check the source, the facebook code changes to
<div class=" fb_reset" id="fb-root"><div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;"></div></div><script src="http://connect.facebook.net/en_US/all.js#appId=someid&xfbml=1"></script><fb:login-button class=" fb_iframe_widget " show-faces="true" width="200" max-rows="1"><span><iframe src="http://www.facebook.com/plugins/login.php?api_key=somekey&channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D0%23cb%3Dfe61c41eeb9262%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff231b08ff49befe%26relation%3Dparent.parent%26transport%3Dpostmessage&locale=en_US&max_rows=1&sdk=joey&session_key=2.erTTx_22d7lVclAChVw8dw__.3600.1300428000-517177672&show_faces=true&width=200" class="fb_ltr" style="border: medium none; overflow: hidden; height: 94px; width: 200px;" name="f216f1832512134" id="f3c59d11d032c" scrolling="no"></iframe></span></fb:login-button>
on the same page...
and for some reason, the iframe where the facebook login is supposed to appear ended up containing the youtube video so both iframes end up containing youtube video....
how would i go about fixing this?
Probably an old Firefox bug which it seems has finally been fixed in v4.0 beta:
https://bugzilla.mozilla.org/show_bug.cgi?id=279048

css: youtube positioning issue with ie7!

i'm wrapping a youtube video inside of a div.vidwrapper.
I don't want the video to be visible but just the controls. This works fine in all Browsers but not in IE7. I have no clue what i have to do to position the video inside ov my .vidwrapper div in IE7.
html
<div class="vidwrapper">
<object class="video" width="308" height="100">
<embed src="http://www.youtube.com/watch?v=1QP-SIW6iKY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="308" height="100" wmode="opaque"></embed>
</object>
</div>
css
/*VIDEO*/
.vidwrapper {
width:308px;
height:25px;
overflow:hidden;
position:relative;
}
.video {
bottom:0px;
position:absolute;
}
Here is an example http://jsfiddle.net/3n3C7/ Check this out in any modern browser and then check it out in IE7. I want only the controls to be visible in IE7.
Any idea how i could make that happen?
Try to use _height:21px; this should work.As i am not on Windows so this is probably my guess, but it works most of the time.
What about this?
<iframe title="YouTube video player" width="480" height="25" src="http://www.youtube.com/embed/riW4W66ptqI" frameborder="0" allowfullscreen></iframe>

Resources