OwlCarousel Youtube video not showing - javascript

I have a youtube video that I want shown but it doesn't show at all. I didn't add a height or width to video because I want to keep it responsive.
http://www.owlcarousel.owlgraphic.com/demos/video.html
<div id="carousel" class="owl-carousel">
<div>
<a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
</div>
<div><img src="http://cdn.playbuzz.com/cdn/7a7a5814-ed79-410c-b748-db6a24f73f0b/4d71c010-f930-4334-ba62-79d87a7ddef4.jpg"></div>
</div>
http://jsfiddle.net/nLz17fcv/12/

Adding a video using a tag Seems not working.
<div>
<a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
</div>
Instead it you can replace it by Iframe to embed the video you want like this.
<div class="item-video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/Oy9GFAQ4x4w">
</iframe>
</div>
In addition to, I've removed transitionStyle: "fade" because this property blocks the carrousel transition.
You can check it on this DEMO
Hope It Helps

In my case the error were with the URL that was being generated while creating iframe, I placed "https://" in front of Youtube iframe and changed few things as (Added "https:")
<pre>
if (video.type === 'youtube') {
html.attr( 'src', 'https://www.youtube.com/embed/' + video.id );
}
else if (video.type === 'vimeo') {
html.attr( 'src', 'https://player.vimeo.com/video/' + video.id );
}
</pre>
One more thing I did for vimeo video was added "https:"
<pre>
url: 'https://vimeo.com/api/v2/video/' + video.id + '.json',
</pre>

Related

Replace video in embedded iframe

How can I replace a video embedded in an iframe using JavaScript or jQuery?
My HTML is:
<iframe src="https://openload.co/embed/7Cq9AdeLtL0/" allowfullscreen="true"
id="bigframe" frameborder="0"></iframe>
<a data-link="https://openload.co/embed/5xTolN_ejRI/">openload</a>
And the other video source should be in the <a> tag so when I click the word "openload", it will change the video source to the second source and another think I need to do this in multiple posts with a variable video
You don't need any JavaScript.
Give the iframe a name ex. <iframe src='about:blank' name='vid'....
Next, give each link a target attribute withe the value of the iframe's name. ex. <a href='path/to/video.mp4' target='vid'...
Demo
Doesn't work here, go to this Plunker for a working demo
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4' target='vid'>1</a>
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005610.mp4' target='vid'>2</a>
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' target='vid'>3</a>
<iframe src='about:blank' name='vid' width='320' height='180'></iframe>
It is batter to play video using html video tag instead iframe .You can do it with jquery like below
html
<a data-link="https://openload.co/embed/5xTolN_ejRI/" href="#">Video 1</a>
<a data-link="https://openload.co/embed/5xTolN_ejRI/" href="#">Video 2</a>
<video width="320" height="240" controls>
<source src="https://openload.co/embed/5xTolN_ejRI" type="video/mp4">
Your browser does not support the video tag.
</video>
JS
$(document).ready(function(){
// set video srs
$('a').click(function(){
$("video").html('<source src="'+$(this).data('link')+'"></source>' );
});
});
const iFrame = document.querySelectorAll("iframe");
// console.log(iFrame)
iFrame.forEach((item, index) => {
let src = item.src;
const newItem = document.createElement("video");
newItem.style = "width:640px; height:360px";
newItem.src = src;
item.parentNode.replaceChild(newItem, iFrame[index]);
newItem.setAttribute("class", "iframe-video-tag-" + index);
newItem.setAttribute("controls", "true");
let videoTag = document.getElementsByClassName("iframe-video-tag-" + index);
videoTag.src = src;
});

Dynamically added videos using jquery not playing on mobile

I am trying to display video preview when some one touch on that screen on touchstart event by dynamically add video tag and video source (which is .webm) video and will start to play automatically. I can fetch the video tag but video is not getting played.
Here is my code:
<div class="thumb-overlay playthumb">
<img src="http://img.domain.com/thumbs/2.jpg" title="" alt="" id="2" class="img-responsive ">
<div class="duration">15:11</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$(".playthumb").on('touchstart', function(event) {
var thumb = $(this).children('img')[0];
var id = thumb.id;
$('#thumbPlayerM').remove();
var video = $('<video style="width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;" id="thumbPlayerM" class="img-fluid" loop=""></video>');
var content = '<source type="video/webm" src="http://img.domain.com/webm/' + id + '/' + id + '.webm"></source>';
$(video).append(content);
$(video).hide();
var target = $("#" + id);
$(target).after($(video));
$(video)[0].play();
$(video).fadeIn();
});
});
</script>
I even try this also
var vid = $("#thumbPlayerM");
vid.play();
$(video).fadeIn();
Video is coming over the image but not playing. Any one can help me? Thank you.
I fixed this issue, need to add this:
<video autoplay loop muted playsinline></video>
My videos are already muted but I have no idea why it was not working. I must check my encoder.

Angular - how to play a youtube video on click

I have an overlay over iframe and I want to make it so that when a user clicks on that iframe overlay video starts playing. Since that page is where I list all the articles I have more iframes, so I should pick the one from that element and then play it. How can I do that in Angular, what should I do in my controller when the click event happens?
This is my html:
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>
<div class="article-image-link">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo()"></div>
</div>
Update
I have tried a suggestion where I don't need to use the Youtube API, but the video was not being played. This is my code:
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-if="!hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&controls=0&showinfo=0' | safeUrl }}"></iframe>
<iframe ng-if="hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&autoplay=1' | safeUrl }} "></iframe>
<div class="article-image-link">
<h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo($index)"></div>
</div>
My controller:
$scope.playVideo = function(index) {
$scope.videoPlaying[index] = true;
$scope.hasOverlayBeenClicked = true;
};
Based on article below mention, if we want to control youtube action like play and stop we need to use youtube api then we can control it by using JS.
https://developers.google.com/youtube/iframe_api_reference
or you can use some ready made lib like.
https://github.com/brandly/angular-youtube-embed
Or you create custom directive which internally uses youtube api.
http://blog.oxrud.com/posts/creating-youtube-directive/
The simplest solution, which doesn't involve using the YouTube API would be to autoplay the video and remove the <iframe /> from the DOM tree until the user clicks the overlay.
E.g.:
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-if='hasOverlayBeenClicked' ng-src="{{article.external_media[0].url + '?autoplay=1' | safeUrl }} "></iframe>
<div class="article-image-link">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo()"></div>
</div>
and somewhere in your controller:
$scope.playVideo = function() {
// ...
$scope.hasOverlayBeenClicked = true;
}
YouTube Iframe embed auto play # StackOverflow
you could do something like this :
on init
$scope.videoSrc = article.external_media[0].url;
and on click
element.bind("click", function(){
$scope.videoSrc = article.external_media[0].url + "&autoplay=1";
});
and then on html
<iframe ng-src="{{videoSrc | safeUrl }} "></iframe>

Change YouTube iframe src with jQuery

I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
extended explanation:
There is a popup div with embeded youtube video
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
This will not work because page is parsed and only on refresh with new ulr will happen.
You need to use ajax to pre-load the page with new url and then to set iframe.

cant select dynamic div and use only its image

i have a simple question regarding jquery, i have a long list of images directly uploaded from youtube, the image have the same v-code as the video itself, so for simpe downloading of all the videos on one page for browsers i made a list of images, once u click it, the video will appear on its place, the thing is that the code that i have oriented for video's image, but not on another one, anyway here is the code:
$('.youtube_thumb > img').click(function(){
var parts = this.src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(this);
$(this).parent().parent().find(".name,.detail,.youtube_play").hide();
$(this).remove();
});
and the div
<div class="youtube">
<div class="name">
#left(name,30)#
</div>
<div class="detail">#left(detail,50)#</div>
<div class="youtube_play"></div>
<div class="youtube_thumb">
<img src="http://img.youtube.com/vi/#link#/0.jpg" style="width:50%;height:300px;border:0;" />
</div>
</div>
as u can see the code takes the img's src and sort the v-code and then put it inside the frame. But i want to work this code only after i click on the class youtube_play but not on youtube_thumb's image.
Thank you all for the help!
$('.youtube_play').click(function(){
var img = $(this).next().find('>img');
var parts = img.get(0).src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(img.get(0));
img.parent().parent().find(".name,.detail,.youtube_play").hide();
img.remove();
});

Categories

Resources