Topic: Putting videos in a carousel - could use your help please
Stanley Davenport pro asked 7 years ago
I took the example carousel for videos and changed out the code to allow the use of an <iframe></iframe> to pull in You Tube videos. Only difference is swapping out "source" for "iframe" but the videos do not populate.
If you see what I did to prevent the videos from showing would you give me a hint on how to fix it?
Thanks
<!--Carousel Wrapper-->
<div id="video-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#video-carousel" data-slide-to="0" class="active"></li>
<li data-target="#video-carousel" data-slide-to="1" class=""></li>
<li data-target="#video-carousel" data-slide-to="2" class=""></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video class="video-fluid" autoplay loop>
<iframe width="560" height="315" src="https://www.youtube.com/embed/C18Eg_IZWME?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</video>
</div>
<div class="carousel-item">
<video class="video-fluid" autoplay loop>
<iframe width="560" height="315" src="https://www.youtube.com/embed/q2HbhHYE9_Q?rel=0&controls=0&showinfo=0&start=38" frameborder="0" allowfullscreen></iframe>
</video>
</div>
<div class="carousel-item">
<video class="video-fluid" autoplay loop>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Kv_s5bIm0WQ?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</video>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#video-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--Carousel Wrapper-->
Add comment
Marta Wierzbicka staff answered 7 years ago
Hi,
unfortunately,
<video></video>
tags which are used in our bootstrap carousel don't support youtube files. You can read about this here: https://stackoverflow.com/questions/19836015/youtube-url-in-video-tag.
Best,
Marta
Stanley Davenport pro commented 7 years ago
Thank you Marta, I'll read the article. Just playing around I removed the tags you mentioned and the videos did show but they were stacked on top of each other instead of in a line like a carousel should be. ThanksFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags