I have some iframes (YouTube videos) and I want to put a link over the iframe. What I want to do is to place every link exactly over the iframe, but this is happening only for the first row (the first 3 iframes), while the others (4th link and beyond) it's been placing next to third link.
Here is the code
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 0,
margin: [20, 60, 20, 60] // Increase left/right margin
});
$('iframe').each(function() {
var source = $(this).attr('src');
$(this).attr('src', source + "&showinfo=0&rel=0&controls=2");
});
$('iframe').addClass('col-xs-12 col-md-4');
$('iframe').attr('href', '#');
var width = $('iframe').width();
$('iframe').css({
'height': 0.6 * width + 'px'
});
var height = $('iframe').height();
$('p').each(function() {
$(this).prepend('<a href="' + $(this).find('iframe').attr('src') + '" class="wrapper col-xs-12 col-md-4 fancybox fancybox.iframe"><a/>');
})
//$('.wrapper').width(width);
$('.wrapper').height(height);
.entry-content p {
margin: 0 0 0 0 !important;
}
.entry-content p iframe {
margin-bottom: 30px;
display: inline-block;
}
.wrapper {
border: none;
position: absolute;
vertical-align: baseline;
float: left !important;
z-index: 9999 !important;
}
.fancybox-type-iframe .fancybox-nav {
width: 60px;
}
.fancybox-type-iframe .fancybox-nav span {
visibility: visible;
opacity: 0.1;
}
.fancybox-type-iframe .fancybox-nav:hover span {
opacity: 1;
}
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content-left-wrap col-md-12">
<div class="entry-content">
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
</div>
</div>
</div>
You can alse find a snippet at https://jsfiddle.net/vg734x3u/1/ and see the result here.
Thank you!
I observed a typo when you prepend an anchor to each p element. <a/> shall be </a>. I also observed a semicolon is missing. If you run JSHint on the fiddle, you will see the problem.
Anyway check out this fiddle. It puts a link over each iframe by modifying the style sheet either. You can start from here and make the layout of your page prettier.
Related
I am trying to create a browser (I got bored) and I want the user to be able to navigate between tabs.
This would need me to hide one iframe and show another one. I'm not sure how to do this using javascript. I also don't want the iframe to resize (like saying height: 0px;).
Here's my sandbox.
Thanks in advance.
You can add custom CSS to your iframe dynamically to hide and show.
Refer following code,
<!DOCTYPE html>
<html>
<head>
<style>
.custom-style {
width: 0;
height: 0;
position: absolute;
border: 0;
}
</style>
</head>
<body>
<iframe id="iframe"
width="300" height="200" src="https://www.youtube.com/embed/zFZrkCIc2Oc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/>
<button onclick="onHide();">Hide Me<button>
<button onclick="onShow();">Show Me<button>
</body>
<script>
function onHide() {
document.getElementById('iframe').classList.add('custom-style');
}
function onShow() {
document.getElementById('iframe').classList.remove('custom-style');
}
</script>
</html>
wrap your iframe inside a div container and when you need to hide it just add a style or class to it and set it display style to none
html
<div class="hide">
<iframe></iframe>
</div>
css
.hide{
display: none;
}
I want to have a responsive youtube video on my website. I need it to look good on desktop and mobile.
this is the code I try:
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<!--Gallery section-->
<section id="songs" class="gallery main brd-bottom">
<div class="container">
<h1>נזילה בגוף - מוראס (אודיו)</h1>
<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/krhum9lNoXw"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<h1 class="large list-inline-item">
<a href="https://www.youtube.com/watch?v=krhum9lNoXw"
class="hover-effect"><i class="icon-youtube"></i> </a>
</h1>
<h1 class="large list-inline-item">
<a href="https://open.spotify.com/artist/3YX6pjxMfcQ1r2yPJaxpBi"
class="hover-effect"><i class="icon-spotify"></i> </a>
</h1>
</div>
<!--End song-->
</div>
<!-- End container -->
</section>
<!--End gallery section-->
This is how it's currently looking at my website:
I'm new to CSS and HTML so if I forgot to upload anything, let me know and I'll add it.
to see the website I'm working on you can check: http://nhrnhr0.pythonanywhere.com/
Thank you!
From the docs: you should use the player setSize method
If you want this to be done when you resize your page, use the window.resize event (as described in MDN)
In short:
window.onresize = function() {
// make sure the player variable is global or visible in current scope in your code
player.setSize(window.innerWidth, window.innerHeight);
}
Hey guys is it possible to have 3 iframes next to one another side by side instead of it going down the page vertically? Here is the iframe code i need put next to one another.
echo("<br /><iframe src='//player.vimeo.com/video/99496559' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99496559'><b>Daniel talks about the Austplan model</b></a>.</p>");
echo("<iframe src='//player.vimeo.com/video/99582077' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99582077'>Peace of mind</a>.</p>");
echo("<iframe src='//player.vimeo.com/video/99579066' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>");
Any help would be much appreciated. Thankyou.
I have a couple of recommendations before getting to the answer.
First, have a look at this Code Guide. It will allow you to write cleaner code.
Second, you don't need to use echo. You can but it will be cleaner without it.
Now for the solution. One way to do it with Use CSS. This is simple example but if you have lots of formatting to do you might want to look at a CSS framework. Something like bootstrap.
The CSS:
.row {
clear: both;
}
.column-3 {
float: left;
width: 30%;
}
The HTML:
<div class="row">
<div class="column-3">
<iframe src="//player.vimeo.com/video/99496559" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><b>Daniel talks about the Austplan model</b>.</p>
</div>
<div class="column-3">
<iframe src="//player.vimeo.com/video/99582077" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Peace of mind.</p>
</div>
<div class="column-3">
<iframe src="//player.vimeo.com/video/99579066" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>WHO IS DANIEL RENNEBERG?.</p>
</div>
</div>
just use css and code the iframes inline-block
iframe{
display:inline-block;
/* other designs you want*/
}
just put iframes in divs and do like that.
<style>
.frame{
float:left;
margin:20px;
}
</style>
<div class="frame">
<iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99496559'><b>Daniel talks about the Austplan model</b></a>.</p>
</div>
<div class="frame">
<iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99582077'>Peace of mind</a>.</p>
</div>
<div class="frame">
<iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>
</div>
Put the 3 iframes into a table:
<table>
<tr>
<td>iframe1</td><td>iframe2</td><td>iframe3</td>
</tr>
</table>
try using :
style="display:inline"
it should work.
I am trying to put a Google Plus One and other social media buttons inline next to each other. For some reason the Google Plus button has moves it down by a few pixel. It says there is a p tag separating them but there is no p tag in the code. The Google Plus code has it's own div tag but I don't know how to align it with the other buttons. I am using Wordpress.
Is there a better way to align these?
<iframe style="border: none; overflow: hidden; width: 52px; height: 20px;" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&width=100&layout=button&action=like&show_faces=false&share=false&height=35" width="300" height="150" frameborder="0" scrolling="no"></iframe><iframe style="border: none; overflow: hidden; width: 60px; height: 20px;" src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fjrbweddings.com%2Fleena-joel&layout=button" width="300" height="150" frameborder="0" scrolling="no"></iframe><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" alt="" /><script src="//assets.pinterest.com/js/pinit.js" async="" defer="defer" type="text/javascript"></script> <a class="twitter-share-button" href="https://twitter.com/share" data-text="Check out this Wedding Video!" data-related="jrbweddings" data-count="none">Tweet</a><script>// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script><script src="https://apis.google.com/js/platform.js" async="" defer="defer"></script><div class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></div><div align="right">Wedding Photographer: Gio Morales</div>
example of how I want it to look but need google plus:
<p class="split-para">
<iframe style="border: none; overflow: hidden; width: 52px; height: 20px;" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&width=100&layout=button&action=like&show_faces=false&share=false&height=35" width="300" height="150" frameborder="0" scrolling="no"></iframe>
<iframe style="border: none; overflow: hidden; width: 60px; height: 20px;" src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fjrbweddings.com%2Fleena-joel&layout=button" width="300" height="150" frameborder="0" scrolling="no"></iframe>
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" alt="" />
</a>
<script src="//assets.pinterest.com/js/pinit.js" async="" defer="defer" type="text/javascript"></script>
<a class="twitter-share-button" href="https://twitter.com/share" data-text="Check out this Wedding Video!" data-related="jrbweddings" data-count="none">Tweet</a>
<script>//
<![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');// ]]>
</script>
<span>Wedding Photographer:
Gio Morales
</span>
I've found out that this jQuery code works but it disables the plug in that's on the page and the 'Wedding Photographer' text that's right justified:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $("iframe[src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&width=100&layout=button&action=like&show_faces=false&share=false&height=35']").unwrap();
Changing
<div class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></div>
to
<span class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></span>
should work, because div is a block element while span is an inline one. Since it was a block element it was being pushed down the page a bit.
I'd like to have a slideshow of my work but I'm new to html/css/jquery. I'm working with a jquery plugin that looks like this:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>
HTML looks like this:
<div align="center" id="slideshow">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="Images/Logo_01.jpg" width="960" height="576" alt="logo"/>
<img src="Images/Logo_02.jpg" width="384" height="640" alt="logo"/>
<img src="Images/Logo_03.jpg" width="640" height="640" alt="logo"/>
<img src="Images/Logo_04.jpg" width="960" height="510" alt="logo"/>
<img src="Images/Logo_05.jpg" width="956" height="640" alt="logo"/>
</div>
<div class="controller" id="next"></div>
</div>
I've been modifying the slider id & I've tried everything I know-margin:0 auto;, text-align: center, display: block; but nothing's working. help?
Try this:
Using jQuery
$('#slider img').css({position: 'relative', margin: 'auto'});
Using CSS, you have to use !important as cycle jQuery plugin is adding inline CSS to images
#slider img {
position: relative !important;
margin: auto !important;
}