I am use PlusThis for video tracking and the code below works fine when viewing the desktop version of the site, however, when I use mobile the video is obviously not responsive.
In order to use the PlusThis feature, I need to use the code below and I can't figure out how to make it responsive:
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script type="text/javascript">
PTFeatureBase.setContactId('[memb_contact fields="Id"]');
PTFeatureBase.setContactEmail('[memb_contact fields="Email"]');
PTVideoTriggers.listen({
type: "vimeo",
playerId: "vimeo_187399998",
feature: "1545-MHe1qQxtRTKCd4cTdB5aDcedYjgJORyfcidK6gv1",
triggerType: "cue",
times: [660]
});
</script>
Could someone please show me how to make this code responsive while still keeping the JavaScript intact that I need in order to use features from PlusThis?
PTFeatureBase.setContactId('[memb_contact fields="Id"]');
PTFeatureBase.setContactEmail('[memb_contact fields="Email"]');
PTVideoTriggers.listen({
type: "vimeo",
playerId: "vimeo_187399998",
feature: "1545-MHe1qQxtRTKCd4cTdB5aDcedYjgJORyfcidK6gv1",
triggerType: "cue",
times: [660]
});
iframe{
width:100%;
height:auto;
}
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
You used width and height inside iframe tag. So, Please take that iframe tag in a div area and use css iframe as div child. Please follow example below:
HTML code:
<div class="videoiframe">
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
CSS code:
.videoiframe iframe {width:100%; height: auto}
I hope, You got it.
Related
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.
I just copy the embed code from the youtube videos and I need to use the youtube vidoes for advertisements
code from youtube
<iframe width="350" height="260" src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
I have edited and updated the code and it looks like this
<div class="video">
<iframe src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
</div>
I have written my CSS and seems it does not have any effect on the Size of the YouTube on web page
CSS
.video{
width:67px;
height:80px;
}
As i increase the size the video stays normal.How to re-size the videos to look big in size?
You want to change the size of the iframe INSIDE the div with class 'video' so:
.video iframe {
width:67px;
height:80px;
}
you have to define class in iframe tag then that css will take effect
<iframe class="video" src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
<style>
.video{
width:67px;
height:80px;
</style>
i use an iframe to embed code where there is a youtube player and some html but the problem is that the full screen button is not present on the youtube player.
Iframe used : http://jsfiddle.net/94150148/8rmbv7mk/
<iframe src="http://www.webvideoproduction.fr/v/vga/230415y.html" width="523" height="880" style="border-width: 0; overflow: hidden; width: 100%;"></iframe>
Do you have a solution ?
Thanks
You have to add allowfullscreen in your youtube iframe tag, where your youtube video is embbeded..
Use the following code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/PD8r5A4sonw" frameborder="0" allowfullscreen></iframe>
Hope this helps.
Update
Hi, try this updated code. it worked for me.
<iframe width='420' height='315' src='http://www.youtube.com/embed/PD8r5A4sonw?rel=0&' allowfullscreen ></iframe>
I have the following video which looks extremely big on the website. Looks right on fiddle. What could be wrong here? Please guide. Thanks. Fiddle. Website.
<iframe src="//player.vimeo.com/video/117775232" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>
NAYA JEEVAN in 90 Seconds
from Naya Jeevan on Vimeo.
</p>
you have
width:100%
height:100%
on .video
This iframe's width and height won't change. I want responsive design. Please help.
Now:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="300"
height="300">
Modified 500x500 - not working, still 300x300:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="500"
height="500">
for a pure CSS solution you need to wrap your iframe around a container and apply styles to it, for more details please see http://andmag.se/2011/11/responsive-embeds/
Another option is using jquery
please take a loom at https://gist.github.com/aarongustafson/1313517
Try this code,
<html>
<body>
<style>
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.iframe1 {position:relative;}
.iframe1 .ratio {display:block;width:100%;height:auto;}
.iframe1 iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
<div class="wrapper">
<div class="iframe1">
<img class="ratio" src="sometransparentimage.jpg"/>
<iframe src="http://www.kadinvekadin.net/mod-burclar.php" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</body>
</html>