I need to make an iframe that provides me responsive Radionomy, RN is a vanadium streaming service.
<iframe style="border:0px; width:250px; height:90px;" frameborder="0" scrolling="no" src="http://radionomy.letoptop.fr/titre.php?radiouid=396bc69a-dae1-430e-bef0-2d1674e42c21&color=000000&bgcolor=FFFFFF&width=250&height=90&size=12&thumb=50&font=Verdana&margin=8"> Votre navigateur ne supporte pas les IFrames</iframe>
My page is responsive but I can not adapt this iframe, which makes my web unabled to be adapted for other resolutions on different devices.
I searched the internet for possible solutions, but I have seen that most sites provide solutions for youtube and vimeo iframes.
I tried this way but I have not succeeded:
HTML:
<div class="contenedor-caratula-responsive-r">
<iframe scrolling="no" src="http://radionomy.letoptop.fr/titre.php?radiouid=396bc69a-dae1-430e-bef0-2d1674e42c21&color=ffffff&bgcolor=000000&width=671&height=377&size=15&thumb=260&font=Open Sans&margin=15&">Tu navegador no sporta los IFrames</iframe>
</div><!--contenedor-caratula-responsive-r-->
</div> <!--close contenedor-r-->
CSS:
.contenedor-caratula-responsive-r{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display:block;
}
.contenedor-caratula-responsive-r iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
EDIT: Is there any way to change the size using javascript?
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 am trying to add a part of another website inside my wordpress.com website.
So I thought I would try iframe, but although this code would have worked on a regular website it doesn't seem to work in wordpress.com.
<div id="my-div" style="width: 400px; height: 200px; overflow: hidden; position: relative;">
<iframe id="my-iframe" style="position: absolute; top: -100px; left: -100px; width: 1280px; height: 1200px;" src="http://www.example.com/" width="300" height="150" scrolling="no"></iframe>
</div>
In wordpress I just get http://www.example.com/ as a result to this code.
Is there a way to make this work?
Try
<object data=http://www.example.com width=”650″ height=”500″> <embed src=http://www.example.com width=”650″ height=”500″> </embed></object>
I've been trying to insert a clickable image into the header to sit on the right bottom. I've been scouring your past questions, and have gotten this far by navigating what is already posted. However, I can get either the style to work with this code without correct linkage:
header {
<style>
div#button
{
position:relative;
align:right;
top:111px;left:640px; margin:0;width:100%;
padding-bottom:25px;
}
</style>
***position is right, but linkage is wrong***
<div id="button">
<a href="0379a5a.netsolhost.com/wordpress1/products/products-page/" >
<img src="http://0379a5a.netsolhost.com/wordpress1/wp-content/uploads/2013/07/shop_now2.png" height="80.5x" width="163.5px"
<div style="float:right;margin-top: 111px; margin-right: 50px; padding-bottom:16px;"
/></a>
</div>
But The link will not work. I can get the link to work, but then the style goes away with this code:
<style>
div#shop_now_button
{
position: relative;
float: right;
margin-top: 111px;
margin-left: 640px;
margin-right: 50px;
width:100%;
padding-bottom:25px;
}
</style>
<div id="shop_now_button">
<div style="float:right;margin-top: 111px; margin-right: 50px; padding-bottom:16px;">
<a s href="http://0379a5a.netsolhost.com/wordpress1/product/products-page/" target="_blank">
<img src="http://0379a5a.netsolhost.com/wordpress1/wp- content/uploads/2013/07/shop_now2.png"
height="80.5px"
width="163.5px"
float="right"
margin-top="111px"
margin-right="50px"
padding-bottom="16px" />
</div>
I just wish I knew what was going on. I've been trouble shooting for hours now... (I apologize if its a simple solution--I'm new at this) this is my vanity domain... http://0379a5a.netsolhost.com/wordpress1/
use:
.header {position: relative;}
.header img {positon: absolute; bottom: 0; right: 0;}
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;
}