-1

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>

どうやってやるの？

4

2 に答える 2

1

iframesは常に長方形です。それを変える方法はありません。

一般的には、達成したいことに応じて、可能な回避策として透明度、z-index、および絶対配置を検討することをお勧めします。

于 2012-05-18T09:21:16.633 に答える
0

iframe は一般的に規則的であることに同意しますが、iframe のプロパティを変更するために、いつでも Java スクリプトや CSS フレームワークの助けを借りることができます。

たとえば、この学習サイトでは、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>

プラグイン関数を呼び出すと、カルーセルの準備が整います。

$('#video').YTPlayer({
fitToBackground: true,
videoId: 'LSmgKRx5pBo'
});

背景にするためにいくつかのCSSをカスタマイズする必要があります

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

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

Youtube Javascript API で動作

Youtube Javascript API オプション

YouTube オプションはすべて、playerVars オブジェクト内に配置する必要があります。

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

プレーヤーを使用して、YouTube のすべての API イベントとメソッドにアクセスします。

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

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

詳細については、以下のリンクを参照してください::

https://github.com/rochestb/jQuery.YoutubeBackground

https://www.learningjquery.com/2016/03/10-jquery-youtube-plugins

于 2018-08-15T06:59:12.917 に答える