自定义iframe形状_Iframe - Fatal编程技术网

自定义iframe形状

iframe

自定义iframe形状,iframe,Iframe,我想将iFrame部分的形状从矩形更改为我自己的自定义形状： <html> <body> <p>dfsdfsdf</p> <iframe src="http://forum.jquery.com/topic/jquery-mobile-and-iframes-to-load-external-websites"> <p>Your browser does not support iframes.</p> &

我想将iFrame部分的形状从矩形更改为我自己的自定义形状：

<html>
<body>
<p>dfsdfsdf</p>
<iframe  src="http://forum.jquery.com/topic/jquery-mobile-and-iframes-to-load-external-websites">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>


DFSDF
您的浏览器不支持iFrame

我该怎么做呢？

iFrame

总是矩形的。这是无法改变的

一般来说，尽管您可能希望将透明度、z索引和绝对定位视为可能的解决方法，这取决于您希望实现的目标。

我同意iframe通常是常规的，但您可以随时从一些java脚本和CSS框架获得帮助，以修改iframe属性

例如，本学习网站将提供有关如何使用j-query库修改iframe的更详细信息

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script src="src/jquery.youtubebackground.js"></script>
````````````````````````````````````````````````````````````````````````````````````````````````````
    <div id="video"></div>

需要定制一些CSS以使其成为背景使用Youtube Javascript API Youtube Javascript API选项任何youtube选项都必须放置在playerVars对象中

使用播放器访问YouTube的所有API事件和方法：

var player = $('#background-video').data('ytPlayer').player;
player.pauseVideo();
player.playVideo();

player.addEventListener('onStateChange', function(data){
console.log("Player State Change", data);
});

更多信息请访问以下链接：

#video{
position: relative;
background: transparent;
}

.ytplayer-container{
 position: absolute;
 top: 0;
 z-index: -1;
}

$('#video').YTPlayer({
fitToBackground: true,
videoId: 'LSmgKRx5pBo'
playerVars: {
  modestbranding: 0,
  autoplay: 1,
  controls: 1,
  showinfo: 0,
  branding: 0,
  rel: 0,
  autohide: 0,
  start: 59
}
});

var player = $('#background-video').data('ytPlayer').player;
player.pauseVideo();
player.playVideo();

player.addEventListener('onStateChange', function(data){
console.log("Player State Change", data);
});