jQuery - Bootstrap 3 and Youtube in Modal
2024-05-06 11:24:29
1. 效果一
HTML
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">VIDEO</a><div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><div><iframe width="100%" height="350" src=""></iframe></div></div></div></div>
</div>jQuery
autoPlayYouTubeModal();//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAGfunction autoPlayYouTubeModal() {var trigger = $("body").find('[data-toggle="modal"]');trigger.click(function () {var theModal = $(this).data("target"),videoSRC = $(this).attr("data-theVideo"),videoSRCauto = videoSRC + "?autoplay=1";$(theModal + ' iframe').attr('src', videoSRCauto);$(theModal + ' button.close').click(function () {$(theModal + ' iframe').attr('src', videoSRC);});$('.modal').click(function () {$(theModal + ' iframe').attr('src', videoSRC);});});}
CSS
/***** MODAL PROPERTIES *****/.modal-content {-webkit-box-shadow: none;box-shadow: none;background:transparent;border:none;outline:none;
}
.modal-content iframe {border:none;padding:0;margin:0;
}
.close {font-size: 80px;margin:-20px 0 0 0;
}
/***** MEDIA QUERIES *****/@media only screen and (max-width: 641px) {/***** MODAL PROPERTIES *****/.modal-body {height:100px;padding:0;margin: 0;}.modal-content {padding:0;margin: 0;}.modal-dialog {position: relative;width: auto;margin: 15px;}.close {margin:-12px 0 0 0;}
}
@media only screen and (min-width: 768px) {/***** MODAL PROPERTIES *****/.close {font-size: 80px;margin:30px -43px -20px 100px;}
}DEMO
2. 效果二
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">.bs-example{margin: 20px;}.modal-content iframe{margin: 0 auto;display: block;}
</style>
<script type="text/javascript">
$(document).ready(function(){/* Get iframe src attribute value i.e. YouTube video urland store it in a variable */var url = $("#cartoonVideo").attr('src');/* Assign empty url value to the iframe src attribute whenmodal hide, which stop the video playing */$("#myModal").on('hide.bs.modal', function(){$("#cartoonVideo").attr('src', '');});/* Assign the initially stored url back to the iframe srcattribute when modal is displayed again */$("#myModal").on('show.bs.modal', function(){$("#cartoonVideo").attr('src', url);});
});
</script>
</head>
<body>
<div class="bs-example"><!-- Button HTML (to Trigger Modal) --><a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a><!-- Modal HTML --><div id="myModal" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">YouTube Video</h4></div><div class="modal-body"><iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe></div></div></div></div>
</div>
</body>
</html>DEMO
原文/转自：jQuery - Bootstrap 3 and Youtube in Modal
jQuery - Bootstrap 3 and Youtube in Modal相关推荐
- 禁用/启用按钮和链接的最简单方法是什么（jQuery + Bootstrap）
本文翻译自:What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) Sometimes I u ...
- jquery+bootstrap 创建日历表格
jquery创建日历表格 jquery+bootstrap 创建日历表格 #写的不太好 欢迎留言赐教 <meta charset="utf-8"><meta na ...
- jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
- ie8浏览器的兼容性问题及解决（jquery,bootstrap）
ie8浏览器的兼容性问题及解决(jquery,bootstrap) 参考文章: (1)ie8浏览器的兼容性问题及解决(jquery,bootstrap) (2)https://www.cnblogs. ...
- jquery+bootstrap分页控件
jquery+bootstrap分页控件 源码: (function ($) {$.fn.extend({ftx_pager: function (paraObj) {var total = para ...
- jquery,bootstrap实现的用户名片信息提示
原文:jquery,bootstrap实现的用户名片信息提示 源代码下载地址:http://www.zuidaima.com/share/1737371579649024.htm 鼠标移动到头像上时提 ...
- 基于javaweb+mysql的大学生实习管理系统(java+springboot+thymeleaf+html+jquery+bootstrap)
基于javaweb+mysql的大学生实习管理系统(java+springboot+thymeleaf+html+jquery+bootstrap) 运行环境 Java≥8.MySQL≥5.7 开发工 ...
- 基于javaweb+SpringBoot的大学生实习管理系统(java+SpringBoot+Thymeleaf+html+JQuery+bootstrap)
项目介绍 本系统的用户可以分为三种:管理员.教师.学生.三种角色登录后会有不同菜单界面: 管理员主要功能: 信息管理 学生信息管理.教师信息管理.生产实习信息管理.顶岗实习信息管理: 生产实习 生产实 ...
- Bootstrap：关于bootstrap单页面中多Modal的问题
2019独角兽企业重金招聘Python工程师标准>>> 在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条,覆盖整个body的阴影瞬间变 ...
最新文章
- SDN/NFV：现状，挑战和未来
- logstash解析系统的messages日志
- （转，改）UML中的几种关系
- Android 开发笔记——通过 Intent 传递类对象
- 2017双11技术揭秘—TDDL/DRDS 的类 KV 查询优化实践
- IAR集成开发环境的使用
- 检测mysql运行失败_MySQL 查看最近执行失败的SQL语句
- 微信推视频红包；百度春晚红包互动 137 亿次；谷歌用皮影庆猪年 | 极客头条...
- expect远程登录服务器并执行命令
- 2021年第四届安洵杯WriteUp（转）
- 数字化时代品牌营销：体验 感知 共创
- Java调优案例分析与实战
- kNN_hand_writing(机器学习)
- dbcp 出现的connection is closed的问题
- 乐鑫ESP32-S3双核处理器，专为 AIoT 市场打造
- CH340g的使用说明
- 一篇文章带你弄懂BI和大数据！
- 前端优化-前端性能优化
- 转文：财经书不是阿拉丁神灯
- SSM-Mybatis通用Mapper