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.
Related
After clicking the thumbnail, the youtube video is not opening. It leaves white blank, have to reload to see the main video
$(function () {
var videos=$(".video");
videos.on("click", function () {
var elm=$(this), conts=elm.contents(), le=conts.length, ifr=null;
for (var i=0;
i < le;
i++) {
if (conts[i].nodeType==8) ifr=conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
}
);
}
)
<div class="video">
<img class="zoom-video" src="~/image/body/special-offer.png">
<iframe width="600" src="https://www.youtube.com/embed/Ze7xsy9tVVQ" frameborder="0" allowfullscreen></iframe>
</div>
Try to copy the provided iframe from the video. Go to the video, click share, then click embed.
Copy paste the code there and try to run the code again.
Here's an example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I've tried this but the 2 js functions don't work. I want it to show an iframe and hide the title when the button is press, just since there are more than one iframes to show, I need a scalable system using the unique IDs of each iframe. Thanks.
<!DOCTYPE html>
<html>
<div id="000">
<div id="video">
<iframe style="position:relative;top:0;width:100%" src="https://www.youtube.com/embed/KfDB9e_cO4k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="title">
<h3>Video 1</h3>
</div>
<button id='000' onclick="getId(this.id);showVideo();">Show</button>
</div>
<div id="111">
<div id="video">
<iframe style="position:relative;top:0;width:100%" src="https://www.youtube.com/embed/6dGYVKt1zw4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="title">
<h3>Video 2</h3>
</div>
<button type="button" id='111' onclick="getId(this.id);showVideo();">Show</button>
</div>
</html>
<script>
function getId(clicked_id) {
return clicked_id;
}
function showVideo() {
for (clicked_id) {
document.getElementById('video').style.display = "block";
document.getElementById('title').style.display = "none";
}
}
</script>
<style>
#video {
display: none;
}
</style>
Refer to the code below.
const showVide = (id) => {
const yt_frame = document.getElementById("youtube_frame");
yt_frame.setAttribute("src", `https://www.youtube.com/embed/${id}`);
yt_frame.style.display = "unset";
}
<!DOCTYPE html>
<html>
<body>
<iframe id="youtube_frame" style="position:relative;top:0;width:100%;display:none" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2>SOME TITLE</h2>
<button onclick="showVide('bSOqMqMzN4Q')">Show</button>
<h2>SOME TITLE</h2>
<button onclick="showVide('jYOfvbD8HQ0')">Show</button>
</body>
</html>
You can list videos dynamically with any backend, for eg: PHP.
If you are using PHP, then you can add following code instead of show button and title list.
<?php
$videolist = array(
array(
"title"=>"Vishnu Stuti",
"ytid"=>"bSOqMqMzN4Q"
),
array(
"title"=>"Visnu Stuti",
"ytid"=>"jYOfvbD8HQ0"
)
);
//ABOVE CODE WILL BE DYNAMIC, IF YOU USE ANY DATABASE, RIGHT NOW ITS JUST FOR EXAMPLE, SO IT IS HARDCODED.
foreach($videolist as $vid){
echo "
<h2>{$vid['title']}</h2>
<button onclick='showVide(`{$vid['ytid']}`)'>SHOW</button>
";
}
?>
I am trying to get my video to play when I click on the .gif.
I have tried multiple snipits, and coding it myself, but have not found a solution yet.
<div class="video" id="videoplayer">
<img src="images/gifisdone.gif">
<!-- <iframe width="940" height="529" src="https://www.youtube.com/embed/oUflzV5z9sc" frameborder="0" allowfullscreen></iframe>-->
</div>
Should be fairly simple. Just add a click call to the gif and then load the video. Run the snippet below to test it out.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="video" id="videoplayer">
<img src="https://media.giphy.com/media/H6niY8viJQvjYRJ7OD/giphy.gif" id="videolink1">
</div>
<div id="divVideo">
<iframe width="420" height="345" >
</iframe>
</div>
</body>
<script>
$('#videolink1').click(function(event) {
var videoFile = 'https://www.youtube.com/embed/tgbNymZ7vqY'+'?&autoplay=1';
$('#divVideo iframe').attr('src', videoFile);
});
</script>
</html>
In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.
I've tried replace youtube and vimeo url with embed code in javascript code.
I've used this code:
EXAMPLE 1:
HTML:
<div id="divContent"></div>
JAVASCRIPT:
$("#divContent").html('http://www.youtube.com/watch?v=t-ZRX8984sc <br /> http://vimeo.com/82495711 <br /> http://youtu.be/t-ZRX8984sc');
$('#divContent').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});
DEMO EXAMPLE 1: http://jsfiddle.net/88Ms2/301/ - It's not working.
EXAMPLE 2
HTML:
<div id="divContent">
http://www.youtube.com/watch?v=t-ZRX8984sc
<br />
http://vimeo.com/82495711
<br />
http://youtu.be/t-ZRX8984sc
</div>
JAVASCRIPT:
$('#divContent').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});
DEMO EXAMPLE 2: http://jsfiddle.net/88Ms2/300/ - It's working
I've retrieved a data from database using ajax. I need the data with html code insert into div using javascript. How can I modify the example 1 to the correct code?
In example 1, change the javascript code to:
$('#divContent').contents()
.filter(function(){
return this.nodeType === 3;
})
.map(function(index, text){
$(text).replaceWith(
text.textContent.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
);
})
It should work now.