I see many trending websites use youtube subscribe button as shown in attached pic. but I am Unable to know how to use that subscribe button in websiteplease check the image for more deatails
here is the html text of story picks that uses same subscribe button
< div class="video-byline">
Subscribe to Storypick
you will have to use this code
<iframe width="560" height="315" src="https://www.youtube.com/embed/QFu_Kmn3qOk" frameborder="0" allowfullscreen></iframe>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
function onYtEvent(payload) {
if (payload.eventType == 'subscribe') {
// Add code to handle subscribe event.
} else if (payload.eventType == 'unsubscribe') {
// Add code to handle unsubscribe event.
}
if (window.console) { // for debugging only
window.console.log('YT event: ', payload);
}
}
</script>
check this link https://developers.google.com/youtube/youtube_subscribe_button
and you can select a lot of configurations with the button
Hope this helps
take care and happy coding
Subscribe to Storypick
Here it is #Pedro Lobito
<span style="vertical-align:top"> Subscribe to Storypick </span>
<div id="___ytsubscribe_0" style="text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 123px; height: 24px; background: transparent;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 123px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 69.1875px;" tabindex="0" vspace="0" width="100%" id="I0_1461955290924" name="I0_1461955290924" src="https://www.youtube.com/subscribe_embed?usegapi=1&channel=Storypick&layout=default&count=default&origin=http%3A%2F%2Fwww.storypick.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.HQVJrXyUzfY.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPsfVIW1uZpDHhPYnkBRXvQcHltAQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1461955290924&parent=http%3A%2F%2Fwww.storypick.com&pfname=&rpctoken=32575577" data-gapiattached="true"></iframe></div>
</div>
Here it is #Pedro Lobito
You can create a Subscribe button over here.
You can also make your own button, and then link it to the subscription confirmation page, which you can get by appending ?sub_confirmation=1 to your channel URL.: https://www.youtube.com/channel/your_channel_id?sub_confirmation=1 (example)
Related
I added an iframe to my CKEditor with the embed plugin.
When i try to add in iframe it works and when is save it, it works in frontend and saves it like this in the database:
<div data-oembed-url="https://www.youtube.com/watch?v=C0DPdy98e4c">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;">
<iframe allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" tabindex="-1">
</iframe>
</div>
</div>
But when i open the editor now again in the backend the iframe is broken, when i click on source it looks like this:
<div data-oembed-url="https://www.youtube.com/watch?v=C0DPdy98e4c">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;">
<p>
<iframe allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" tabindex="-1"
></iframe>
</p>
</div>
</div>
The config for my editor looks like this:
editor:
config:
removePlugins:
- null
removeButtons:
- Strike
AllowedContent:
- true
allowTagsOutside:
- iframe
allowTags:
- iframe
In my Page.ts i added this:
RTE {
default {
proc.allowTags := addToList(object,param,embed,iframe)
proc.allowTagsOutside := addToList(object,embed,iframe)
proc.entryHTMLparser_db.allowTags < .allowTags
proc.entryHTMLparser_db.allowTags := addToList(iframe)
}
}
i think my problem was that my old config in the rte.ts from my typo3 6.x version was still loaded. i added this to my default.yaml:
editor:
processing:
allowTags:
- s
- span
- iframe
- i
HTMLparser_db:
tags:
span:
rmTagIfNoAttrib: false
config:
allowedContent: true
removeFormatAttributes: ""
extraAllowedContent:
- span
- iframe
and added this to my page.ts
RTE.default.proc.blockElementList = PRE,UL,OL,H1,H2,H3,H4,H5,H6,ADDRESS,DL,DD,HEADER,SECTION,FOOTER,NAV,ARTICLE,ASIDE,IFRAME
Hope this helps you if you experience the same problem.
I have got some HTML code from investing.com below:
<iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by Investing.com</span></td></tr></table>
The output is look like the picture below:
enter image description here
And I would like to add css to make the background like below:
Rounded rectangle, 30 opacity with light green, maybe 10 px for margins
enter image description here
Can anybody help me. I am new for html and css. Thank you very much.
Lawrence
just add wrapping div and css class .frame {} with colored border
.frame {
display: inline-block;
border: 30px solid ;
border-color: rgba(200,255,200,0.6);
border-radius: 30px;
margin: 10px;
}
<div class="frame"><iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by Investing.com</span></td></tr></table></div>
<style>
.frame {
display: inline-block;
border: 30px solid ;
border-color: rgba(200,255,200,0.6);
border-radius: 30px;
margin: 10px;
}
</style>
<div class="frame"><iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by Investing.com</span></td></tr></table></div>
I suggest you to put the iframe to a div. In this example .iframe-container. So the HTML will look like this:
<div class="iframe-container">
<iframe frameborder="0" height="340" width="210" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe>
</div>
<br />
<table width="197">
<tr>
<td>
<span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by Investing.com
</span>
</td>
</tr>
</table>
Please note that I changed the with and height of the iframe since the form it was containing, was not matched with the initial attributes. You can reset it if you'd like.
Then write some CSS as below:
.iframe-container {
display: inline-block;
margin: 30px;
padding: 30px;
background: rgba(0, 255, 0, .3);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
iframe {
margin: 0;
padding: 0;
background: white;
}
See the result at jsFiddle.
Sorry! I know that is my problem that I tried many times to combine those HTML and css together, but doesn't work.
My purpose is only want to have "a batch of code" to paste into the website.
Thank you for your concern.
I'm using Google Map Javascript Api to put a map on my website.
I created a button on the top right corner of the map just so the user could close it
This is my CSS button code:
#close-map {
position: absolute;
top: 0;
right: 0;
background: #ffc300;
color: #000;
font-size: 16px;
padding: 10px 20px;
text-align: center;
cursor: pointer;
z-index: 400;
}
I used jQuery to put it inside the #map div
$(window).load(function() {
$('#map').prepend('<div id="close-map">close map</div>');
});
and I have jQuery code to hide the map when I'm clicking on it
So I can see the button on the corner but it's not clickable
you need to put that clickable button out of the #map div. for that you can wrap it on another div (testing-div) and put button into it.
<div class="testing-div" style="position:relative;">
<div id="close-map">close map</div>
<div id="map" style="height: 580px"></div>
</div>
now you can add some jquery to close the testing-div
$("#close-map").click(function(){
$(".testing-div").slideUp();
});
I cannot for the life of me figure out how to make the images within the following code align horizontally across the top. I also need to get the h1's to align the same as well. It seems to behave oddly to me when I use the vertical-align property.
HTML:
<div class='services-banner'>
<div class='service-one'>
<img align='top' src='http://static.squarespace.com/static/515a53e1e4b063d29d1bd369/t/51a17287e4b09448823f89f6/1369535111697/Link%20Icon.png'>
<h1><b>Social Media Marketing</b></h1>
<p class='service-description'>Engage your audience with organic brand growth. We work to connect with your customers through social media and humanize your brand. Our team takes your social media campaign from strategy to action! </p>
</div>
<div class='service-two'>
<img align='top' src='http://static.squarespace.com/static/515a53e1e4b063d29d1bd369/t/51a17290e4b0941ebb86cb78/1369535120489/Web%20Design%20Icon.png'>
<h1><b>Website Design</b></h1>
<p class='service-description'>We offer customized website design to scale your content across platforms. Our design team will produce a clean and focused website. We include search engine optimization, analytics and a intuitive platform to keep your content relevant. </p>
</div>
<div class='service-three'>
<img align='top' src='http://static.squarespace.com/static/515a53e1e4b063d29d1bd369/t/51a1728be4b034b67e50db59/1369535115782/Search%20Engine%20Marketing%20Icon.png'>
<h1><b>Search Engine Marketing</b></h1>
<p class='service-description'>Visibility is everything. Project your brand across the internet with search engine marketing. Our team will customize and execute a potent add campaign. We offer customized text or visuals for your brand! </p>
</div>
<div class='service-four'>
<img align='top' src='http://static.squarespace.com/static/515a53e1e4b063d29d1bd369/t/51a17289e4b0f957dd565595/1369535113477/Review.png'>
<h1><b>Reputation Management</b></h1>
<p class='service-description'>Studies show, product endorsements effect consumer behavior. Our team uses the latest in SEO technology to scour the internet in search of negative press. We create a plan of action to manage reviews by responding to consumers concerns. </p>
</div>
CSS:
.services-banner {
width: auto;
height: auto;
display: block;
position: absolute;
text-align:center;
overflow: hidden;}
.service-description {
text-align:left;
font-weight: 400;
}
.service-one {
width: 225px;
height: 500px;
display:inline-block;
padding: 10px;
background-color: transparent;
}
.service-two {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}
.service-three {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}
.service-four {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}
.services-banner img {
width: 160px;
}
You can see a live example at http://www.ampfly.sqsp.com on the home page. Please excuse the unfinished-ness of the site, its a work-in-progress. Thanks!
Replace display:inline-block; in all your service-one, service-two, service-three and service-four classes with display:table-cell. This will solve your issue.
For instance,
.service-one, .service-two, .service-three, .service-four{
display: table-cell;
}
Here is the Working Solution.
Hope this Helps.
When flash banners from thirdparty are displayed they are overlapping my code:
test URL is: http://test.otwierac.pl/ (refresh page many times and you will see)
Code is:
<div style="width:100%">
<div id="banner">
<script>
<!--
var d = new Date();
r = escape(d.getTime()*Math.random());
document.writeln('<script src="http://tracking.novem.pl/rotator/CD31115/59&js=1&r='+r+'&keyword="><\/script>');
//-->
</script><div id='beacon_1' style='position: absolute; left: 0px; top: 0px; visibility: hidden;'><img src='http://test.otwierac.pl/reklamy/www/delivery/lg.php?bannerid=1&campaignid=1&zoneid=0&loc=http%3A%2F%2Fwww.test.otwierac.pl%2F&referer=http%3A%2F%2Ftest.otwierac.pl%2F&cb=6d0002d6e4' width='0' height='0' alt='' style='width: 0px; height: 0px;' /></div>
</div>
</div>
CSS code:
#banner
{
margin-top:10px;
width:950px;
margin:0 auto;
text-align:center;
}
How to fix this ? Banners should be centered and not overlapping my text.
There's a flash parameter
wmode: opaque
Should do the trick
EDIT
From the adobe website:
opaque - The SWF content is layered together with other HTML elements on the page. The SWF file is opaque and hides everything layered behind it on the page. This option reduces playback performance compared to wmode=window or wmode=direct.
EDITED:
Try:
#banner {
height: 315px;
margin-top: 10px;
text-align: center;
width: 950px;
}