I want to embed a youtube video in a bootstrap one page scroll web page, exactly in a carousel video slider.
I have a problem with both Chrome and Firefox (no problem using Safari).
Here is my code:
<section class="videos">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators" style="top:125%">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" style="top:100px;">
<div class="item active">
<div style="text-align:center;">
<iframe width="853" height="480" src="http://www.youtube-nocookie.com/embed/XXXX?rel=0" frameborder="0" allowfullscreen></iframe>
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div style="text-align:center;">
<iframe width="853" height="480" src="http://www.youtube-nocookie.com/embed/XXXX?rel=0" frameborder="0" allowfullscreen></iframe>
<div class="carousel-caption">
</div>
</div>
</div>
</div>
I get two error:
In my console I get:
Blocked a frame with origin "https://www.youtube-nocookie.com" from accessing a frame with origin "http://www.domain.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Uncaught Error: Error calling method on NPObject.
The videos, appears as black boxes.
What should I do? Thanks
I'd recommend you using an object for the videos you want to embed in your site instead of the iframe. It has a better web browser independent behaviour and works as well with other video providers that enable sharing (dailymotion, vimeo)
<embed width="756" height="461" style="display: block;" src="http://www.youtube.com/v/nlcIKh6sBtc?autohide=1&version=3?autohide=1&version=3&autoplay=1" type="application/x-shockwave-flash" bgcolor="#000000" scale="scale" allowfullscreen="true" salign="tl" allowscriptaccess="never" wmode="opaque">
The above code snippet is an example of how to share a youtube video on a web page with various parameters. Hope this helped.
Related
I'm using Bootstrap's (3.3.5) Carousel to show a Slider on a page. Code is pretty simple and standard:
<div id="header-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="pull-right carousel-indicators">
<li data-target="#header-carousel" data-slide-to="0" class="active"></li>
<li data-target="#header-carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<article class="item active" style="background-image:url(foo.jpg);">
<div class="carousel-caption">
<h1>FOO</h1>
<h2>Caption</h2>
</div>
</article>
<article class="item" style="background-image:url(bar.jpg);">
<div class="carousel-caption">
<h1>BAR</h1>
<h2>Caption</h2>
</div>
</article>
</div>
</div>
I was missing the option to swipe on mobile devices, so I added jQuery mobile 1.4.5 to get this function like this:
$(document).ready(function() {
$("#header-carousel").swiperight(function() {
$(this).carousel('prev');
});
$("#header-carousel").swipeleft(function() {
$(this).carousel('next');
});
});
So far it works on mobile and tablets. But it also works on desktops, so one can't select the caption without triggering the swipe-methods. Is there a possibility to deactivate this behaviour?
I would ask you to disable it only for those devices without Touch support. So for that, you can try this:
function isTouchSupported () {
try {
document.createEvent("TouchEvent");
touch = true;
} catch (e) {
touch = false;
}
return touch;
}
The same program can be written in another way too:
function isTouchSupported () {
return 'ontouchstart' in document.documentElement;
}
And after initializing, you can unbind the events:
if (!isTouchSupported())
$("#header-carousel").off("swiperight").off("swipeleft");
edit: added () to isTouchSupported-call
Self Proof Check:
On my desktop Google Chrome, using F12 Developer Tools:
On my mobile Google Chrome, using jsBin's console tab.
i used toggle to hide paragraph through a video but i do not run
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" volume="0" width="100%">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
<div class="slider-caption ">
<div class="hide">
<h2>Marketing Solutions Company</h2>
<p>feeling special</p>
</div>
<a href="#" class="slider-btn" id="polina onclick=" toggleContent()>Pause</a> </a>
</div>
</li>
</ul>
</div>
<!-- /.flexslider -->
</div>
<!-- /.slider -->
</div>
<!-- /.site-slider -->
</div>
how i can show this paragraph when i paused the video because i use display:none
This Line Needs to be:
Pause
There was one closing Tag to much and the `"? was missing behind the onClick Event.
But there are several other invalid HTML Tags too.
The <source> Tag doesn't gets closed for example.
If the code still does'nt work after correcting all HTML Markup please Post your Javascript Code as well.
I have built a bootstrap video carousel. It is working just fine but, the only problem I have is the carousel keeps sliding to the next slide after 5 seconds. How do I make it stop autosliding and only slide when the user clicks on the left or right arrows? I have pasted the code below.
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause=hover>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Michael Vick 88 yard touchdown pass to DeSean Jackson.mp4" />
</video>
</div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Vick to Jeremy Maclin for 50 Yard TD.mp4" />
</video>
</div>
</div>
<div class="item">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Michael Vick Scramble Plays vs Rams 2011.mp4" />
</video>
</div>
</div>
</div>
By adding data-interval="false"
<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" >
From the documentation
Option - Interval - ..If false, carousel will not automatically cycle.
2021 Update
In Bootstrap 5 it is data-bs-interval="false"
<div id="carousel-example-generic" class="carousel slide" data-bs-interval="false" data-ride="carousel" data-pause="hover">
Documentation
There are two ways.
1.
Update 2022: Bootstrap 5.x
In your HTML code, you need to use data-bs-interval="false"
<div id="your-carousel-id" class="carousel slide" data-bs-interval="false">
</div>
Bootstrap 4.x
In your HTML code, you need to use data-interval="false"
<div id="your-carousel-id" class="carousel slide" data-interval="false">
</div>
2.
If you want to do with the help of Jquery then you need to add.
// document ready
$(document).ready(function(){
// Event for pushed the video
$('#your-carousel-id').carousel({
pause: true,
interval: false
});
});
Thanks :)
To stop the autoplay is by just removing the attribute data-ride=”carousel” from the htmlcode
<div id="carousel-example" class="carousel slide" data-ride="carousel">....</div>
There is another way to stop autoplay just add below code in your js file
$(window).load(function() {
$('.carousel').carousel('pause');
});
Paste this code on your custom Javascript file.
$('.carousel').carousel({
interval: false
});
In react-bootstrap in order to stop cycling you have to use
<Carousel interval={null}>
...
</Carousel>
There is an update on bootstrap
https://getbootstrap.com/docs/5.1/components/carousel/
data-bs-interval="false"
for bootstrap v5.2:
Just remove "data-bs-ride:carousel" part from the div tag having "carousel slide" in order to stop the auto-slide
By adding data-interval="false" and removing data-ride="carousel" to the carousel id or class
I spent a lot of time on why data-bs-ride=false does not work for this and i understand it now.
In version 5.0 and 5.1, notice in documentation under options subsection it says
Autoplays the carousel after the user manually cycles the first item. If set to 'carousel', autoplays the carousel on load.
This just means that data-bs-ride=false, data-bs-ride=true or data-ride="carousel" it will still auto slide so we have to use
data-interval="false" and remove data-ride="carousel"
But in version 5.2 the documentation says that
If set to true, autoplays the carousel after the user manually cycles the first item. If set to "carousel", autoplays the carousel on load.
So, we can stop the autoplay by just using data-bs-ride=false or just removing data-bs-ride tag bc it is by default false.
I try build app by JQM and I use widget Navbar, until now I used by IFrame but it works not good.
My question is, what can I replace instead of IFrame ?
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li>
<a href="#info_tab" class="infoButton ui-btn-active" data-icon="custom"
id="infoMenu"> </a></l`enter code here`i>
<li><a href="#calendar_tab" class="calendarButton"
data-icon="custom" id="calendarMenu"></a></li>
<li><a href="#picture_tab" class="picturesButton" data-icon="custom"
id="pictureMenu"> </a></li>
<li></li>
</ul>
</div>
<!-- End Navigation Bar -->
<!-- iFrames -->
<div id="iFramesDIV">
<div id="info_tab" class="fullScreen ">
</div>
<div id="calendar_tab" class="fullScreen hide">
<iframe id="calendarFrame" src="tab_pickadate/calendar.html"
scrolling="no" frameborder="0" class="fullScreen"></iframe>
</div>
<div id="picture_tab" class="fullScreen hide">
<iframe id="pictureFrame" src="" scrolling="no" frameborder="0"
class="fullScreen"></iframe>
</div>
<div id="buy_tab" class="fullScreen hide">
<iframe id="buyFrame" src="tab_buy/buy.html" frameborder="0"
class="fullScreen"></iframe>
</div>
</div>
<!-- End iFrames -->
</div>
<!-- End Content-->
Please help me :)
To use iframes you will need to include JQM library in the source of Iframe. Try including JQM in "tab_pickadate/calendar.html" path. I also worked with Iframes and JQM together.
I have four links which open on an iframe on that same page. My problem is that the iframe takes the space on page load and I want that it will remain hide until any link is clicked coz in small screen size the same page is loading on that iframe on page load though it working well in big screen size.
Here is my code for opening the iframe :
<ul class="thumbnails">
<li class="span2">
<h6>DELHI :</h6>
A-21/13,Naraina Industrial Area,
Phase II,
New Delhi - 110028.
Tel. No. : 011 - 49807100 / 101
Click Here To View Map
</li>
<li class="span2">
<h6>NOIDA :</h6>
B-25,Sector - 59,
Noida- 201301, UP.
Tel. No. : 0120 - 4904000
Click Here To View Map
</li>
<li class="span2">
<h6>CHENNAI :</h6>
82,Sterling Road,
Nungambakkam,(Opposite Loyola College),
Chennai - 600034
Tel. No. : 044-42664445 /46/49/50, 43447900
Click Here To View Map
</li>
<li class="span2">
<h6>JAIPUR :</h6>
SP-38A,RIICO Industrial Area,
Delhi Road,Kukas,
Jaipur-302028.
Tel. No. : 01426 - 414800, 227515, 227616, 227617
Click Here To View Map
</li>
</ul>
<span style="color: #e15b1f;">For more information contact: counsellor#pearlacademy.com, Toll Free No. 1800 103 3005</span>
And here is the iframe on same page:
<div style="display:none;">
<iframe name="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe>
</div>
Now you can do this :focus
As like this
Css
.frame_div{
border:solid 1px red;
width:300px;
display:none;
}
.frame_div iframe{
height:200px;
width:300px;
background:green;
}
.click_iframe{
display:inline-block;
vertical-align:top;
}
.click_iframe:focus + div{
display:block;
}
HTML
<ul class="thumbnails">
<li class="span2">
Click Here To View Map
<div class="frame_div"><iframe name="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div>
</li>
</ul>
Live Demo
You could add an onclick event to your ul:
<ul class="thumbnails" onClick="document.getElementById('frame').parentNode.style.display=''">
assuming that your iframe id is "frame":
<div style="display:none;"><iframe name="frame" id="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div>